/*
  The section lengths, which set the scroll timeline (in viewport heights).
*/
#wearable {
  height: calc(var(--vh) * 895);
} /* END + LEAVE[1] screens (sections/wearable.js), with 8 cards */
#features {
  height: calc(var(--vh) * 100 * (16 + var(--show-length)));
} /* 16 screens, + the drawing's show (--show-length, SHOW_LENGTH in sections/sketch/shots.js, set by sections/features.js), so the custom tools after it run on 'a' less 14 */
#grip {
  height: calc(var(--vh) * 690);
} /* 600, + 90 for the heading's hold before the tools */

/*****************************************************************************/
/***                                                                       ***/
/***  04  The live desk's features.                                        ***/
/***                                                                       ***/
/*****************************************************************************/
#features .section__inner {
  overflow: hidden;
}
#features-items {
  position: absolute;
  z-index: 2;
  inset: 0 auto 0 0;
  width: min(31.5vw, 500px);
  pointer-events: none;
}
.features-item {
  position: absolute;
  inset: 0;
  padding: calc(var(--site-padding-y) * 2.7) calc(var(--site-padding-x) * 1.18)
    calc(var(--site-padding-y) * 1.45);
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
}
.features-item-top {
  display: flex;
  align-items: center;
  gap: 0.8em;
  margin-top: calc(var(--vh) * 8);
}
.features-item-icon {
  flex: none;
  width: clamp(2rem, 2.8vw, 3rem);
  height: clamp(2rem, 2.8vw, 3rem);
  display: grid;
  place-items: center;
  border: 1px solid rgb(243 235 220 / 0.6);
  border-radius: 50%;
}
.features-item-icon svg {
  width: 67%;
  height: 67%;
}
.features-item-tagline {
  max-width: 18em;
  font-size: clamp(0.78rem, 1vw, 1rem);
}
/*
  Then vs now: why ours wins, under the tagline (a tick in the accent per
  line).
*/
.features-item-list {
  list-style: none;
  margin: calc(var(--vh) * 3.5) 0 calc(var(--vh) * 3);
  padding: 0;
  max-width: 22em;
  font-size: clamp(0.74rem, 0.92vw, 0.95rem);
  line-height: 1.3;
}
.features-item-list li {
  position: relative;
  padding: 0.34em 0 0.34em 1.7em;
  white-space: nowrap;
  border-top: 1px dashed rgb(243 235 220 / 0.18);
}
.features-item-list li:last-child {
  border-bottom: 1px dashed rgb(243 235 220 / 0.18);
}
.features-item-list li::before {
  content: '';
  position: absolute;
  left: 0.1em;
  top: 0.7em;
  width: 0.7em;
  height: 0.38em;
  border-left: 1.5px solid var(--color-accent);
  border-bottom: 1.5px solid var(--color-accent);
  transform: rotate(-45deg);
}
.features-item-desc {
  margin-top: auto;
  max-width: 20em;
  font-size: clamp(0.84rem, 1.18vw, 1.18rem);
  line-height: 1.34;
  text-wrap: pretty;
}
.features-item .o-dashline {
  flex: none;
  margin: calc(var(--vh) * 4.5) 0 calc(var(--vh) * 2.2);
}
.features-item-title {
  font-size: clamp(2.05rem, 3.25vw, 4.2rem);
  max-width: 9em;
  line-height: 0.94;
  text-wrap: balance;
}
/* The forest's WebGL layer lies under the drawing's 2D canvas. */
#features-forest-canvas,
#features-sketch-canvas {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  visibility: hidden;
}
#features-extra-wrapper {
  position: absolute;
  z-index: 2;
  right: var(--site-padding-x);
  bottom: calc(var(--site-padding-y) * 1.3);
  width: min(27vw, 400px);
  text-align: right;
  pointer-events: none;
  text-shadow: 0 2px 10px #000c;
  font-size: clamp(0.75rem, 0.95vw, 1rem);
}
.features-extra-item {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  opacity: 0;
  visibility: hidden;
}
.features-extra-item__footnote {
  opacity: 0.76;
  text-transform: uppercase;
}
.features-extra-item__equation {
  margin-top: 1em;
  font-family: var(--mono-font);
  font-size: 1.15em;
  color: var(--color-accent);
}

@media (max-width: 767.98px) {
  /*
    On phones the copy spans the width (the tagline at the top, the description
    and the title at the bottom), leaving the middle band for the laptop; the
    frosted box hugs only the bottom block.
  */
  #features-items {
    width: 100vw;
  }
  .features-item-desc {
    max-width: none;
  }
  .features-item {
    padding: calc(var(--site-padding-y) * 4.5) var(--site-padding-x) calc(var(--site-padding-y) * 2);
  }
  .features-item-top {
    margin-top: calc(var(--vh) * 4);
  }
  .features-item-title {
    font-size: clamp(2rem, 9vw, 4rem);
  }
  .features-item-desc {
    font-size: var(--body3);
  }
  /*
    The phone layout: the tagline in a frosted pill near the top, and the title
    over the description, centered, in a frosted card at the bottom (the card
    is the shared blur box, fitted to the text in features.js).
  */
  .features-item {
    align-items: center;
    text-align: center;
    padding: calc(var(--site-padding-y) * 4.5) calc(var(--site-padding-x) * 2.4)
      calc(var(--site-padding-y) * 3.5);
  }
  .features-item-top {
    margin-top: calc(var(--vh) * 6);
    padding: 0.7em 1.4em 0.7em 0.7em;
    border-radius: 999px;
    background: rgb(60 56 44 / 0.45);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }
  .features-item-tagline {
    max-width: none;
    font-size: calc(var(--sub1) * 0.95);
  }
  .features-item .o-dashline {
    display: none;
  }
  .features-item-title {
    order: 1;
    margin-top: auto;
    font-size: clamp(1.7rem, 7.6vw, 3rem);
    max-width: 14em;
  }
  .features-item-desc {
    order: 2;
    margin-top: 0.9em;
    max-width: 24em;
    font-size: var(--body2);
  }
  /*
    There is no room between the pill and the card without covering the
    laptops.
  */
  .features-item-list {
    display: none;
  }
}

/*****************************************************************************/
/***                                                                       ***/
/***  05  The pixel loupe (grip).                                          ***/
/***                                                                       ***/
/*****************************************************************************/
#grip {
  --box-width: calc(var(--vh) * 35);
}
#grip .section__inner {
  pointer-events: none;
}
#grip-header {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  left: 0;
  top: calc(var(--site-padding-y) + var(--vh) * 8);
  width: 100%;
  text-align: center;
  /*
    A drop-shadow, not a text-shadow, so the letters' blur (sections/grip.js)
    never sits over a shadow.
  */
  filter: drop-shadow(0 2px 16px #000a);
}
#grip-title {
  margin: 0.45em 0;
}
/*
  The loupe sits right of the framed feature (the feature is framed in the left
  60%).
*/
#grip-zoom-box {
  position: absolute;
  left: 64%;
  top: 46%;
  width: min(var(--box-width) * 1.1, 32vw);
  pointer-events: auto;
  opacity: 0;
}
#grip-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  overflow: visible;
}
#grip-frame-quad {
  fill: none;
  stroke: #f3ebdc;
  stroke-width: 1;
  stroke-dasharray: 3 3;
}
#grip-frame-leader {
  fill: none;
  stroke: rgb(var(--color-accent-rgb) / 0.6);
  stroke-width: 1;
  stroke-dasharray: 2 4;
}
#grip-frame-handles {
  fill: var(--color-accent);
}
#grip-zoom-box__inner {
  position: relative;
  width: 100%;
}
#grip-zoom-box__content {
  position: relative;
  display: flex;
  justify-content: space-between;
  width: 100%;
  color: var(--color-black);
  padding: 0.5em 1em;
}
#grip-zoom-box__content-bg {
  position: absolute;
  background: var(--color-white);
  left: 0;
  top: 0;
  width: 0;
  height: 100%;
  z-index: -1;
}
/*
  The pop-out panel's description: what the framed tool does, and what it is
  built with.  Solid, not backdrop-filter, b/c a backdrop blur over the live
  WebGL canvas re-reads and blurs what is behind it every frame (it tripled
  this chapter's frame time).
*/
#grip-zoom-box__desc {
  margin-top: 0;
  padding: 1em 1.1em 1.1em;
  background: rgb(15 13 10 / 0.9);
  border: 1px solid rgb(243 235 220 / 0.16);
  color: var(--color-white);
  text-shadow: none;
}
#grip-zoom-box__desc-text {
  margin: 0;
  line-height: 1.45;
  text-transform: none;
}
#grip-zoom-box__desc-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45em;
  margin-top: 0.9em;
}
#grip-zoom-box__desc-tags span {
  padding: 0.35em 0.75em;
  border: 1px dashed rgb(var(--color-accent-rgb) / 0.55);
  border-radius: 999px;
  color: var(--color-accent);
  text-transform: uppercase;
  font-size: 0.82em;
}

/*
  "Noteworthy" inside the serif headlines, opened up from the headline's tight
  tracking.
*/
#statement-pre-title em,
#contact-title span {
  letter-spacing: 0;
}

/*****************************************************************************/
/***                                                                       ***/
/***  05b  The anatomy.                                                    ***/
/***                                                                       ***/
/*****************************************************************************/
/* A page taken apart (sections/anatomy.js). */
#anatomy {
  height: 0;
} /* Played inside the features (sections/features.js) */
#anatomy .section__inner {
  position: fixed;
  inset: 0 auto auto 0;
  width: 100%;
  height: calc(var(--vh) * 100);
  pointer-events: none;
}
#anatomy-copy {
  position: absolute;
  z-index: 2;
  left: var(--site-padding-x);
  top: calc(var(--site-padding-y) * 2 + var(--site-header) + var(--vh) * 4);
  width: min(28vw, 440px);
}
#anatomy-tagline {
  font-size: clamp(0.78rem, 1vw, 1rem);
}
#anatomy-title {
  margin-top: 0.5em;
  font-family: var(--serif-font);
  font-size: clamp(2.3rem, 3.6vw, 4.6rem);
  font-weight: 400;
  line-height: 0.98;
  text-transform: none;
  letter-spacing: -0.01em;
}
#anatomy-title em {
  font-style: italic;
  color: var(--color-accent);
}
/*
  Each letter fades in on its own opacity, and Safari repaints a letter only
  inside its box while that changes, so ink outside the box keeps the faded
  first frame.  At this line height the tails of "p", "y" and the comma hang
  about 0.06em below the box, and the italic "p" leans 0.09em past its left
  edge.  So pad each letter's box over its ink, and take the padding back in
  the margin; nothing moves.
*/
#anatomy-title > div div {
  padding: 0.1em 0.12em 0.15em;
  margin: -0.1em -0.12em -0.15em;
}
#anatomy-desc {
  margin-top: 1.1em;
  max-width: 22em;
  font-size: clamp(0.84rem, 1.1vw, 1.1rem);
  line-height: 1.38;
  color: rgb(243 235 220 / 0.78);
}
#anatomy-info {
  margin-top: calc(var(--vh) * 5);
  padding-top: calc(var(--vh) * 2.2);
  border-top: 1px dashed rgb(243 235 220 / 0.2);
  min-height: 12em;
  opacity: 0;
}
#anatomy-info-num {
  font-family: var(--mono-font);
  font-size: var(--sub2);
  letter-spacing: 0.08em;
  color: var(--color-accent);
}
#anatomy-info-name {
  margin-top: 0.4em;
  font-family: var(--serif-font);
  font-size: clamp(1.6rem, 2.3vw, 2.8rem);
  font-weight: 400;
  line-height: 1.02;
  text-transform: none;
}
#anatomy-info-text {
  margin-top: 0.8em;
  max-width: 25em;
  font-size: clamp(0.8rem, 1vw, 1rem);
  line-height: 1.45;
  color: rgb(243 235 220 / 0.76);
}
#anatomy-hint {
  display: flex;
  align-items: center;
  gap: 0.6em;
  margin-top: calc(var(--vh) * 3);
  font-family: var(--mono-font);
  font-size: var(--sub2);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgb(243 235 220 / 0.62);
  opacity: 0;
}
#anatomy-hint em {
  font-style: normal;
  color: var(--color-accent);
}
.anatomy-hint__icon {
  width: 16px;
  height: 16px;
  flex: none;
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.anatomy-hint__touch {
  display: none;
}
@media (hover: none) {
  .anatomy-hint__mouse {
    display: none;
  }
  .anatomy-hint__touch {
    display: inline;
  }
}

#anatomy-stage {
  position: absolute;
  z-index: 1;
  left: 31vw;
  right: 15vw;
  top: 0;
  bottom: 0;
  display: grid;
  place-items: center;
  perspective: 2600px;
  perspective-origin: 50% 35%;
}
/*
  One plane: 100u wide and 64.8u tall, the laptop screen panel's own shape
  (1.543 : 1, measured head on at 515.4 x 334 px), so the screen lines up on it
  edge for edge.  --rx and --rz tilt it, --z parts the layers, and --open (0 to
  1) brings in the plates which make each layer read as a sheet of its own.
*/
#anatomy-stack {
  --pw: min(44vw, calc(var(--vh) * 66));
  --u: calc(var(--pw) / 100);
  --rx: 0deg;
  --rz: 0deg;
  --open: 0;
  position: relative;
  width: var(--pw);
  height: calc(var(--u) * 64.8);
  transform-style: preserve-3d;
  transform: translate3d(0, var(--rise, 0px), 0) rotateX(var(--rx)) rotateZ(var(--rz));
}
.anatomy-layer {
  --z: 0px;
  position: absolute;
  inset: 0;
  transform: translateZ(var(--z));
  transition: opacity 0.35s;
  color: var(--color-white);
}
.anatomy-layer > * {
  position: absolute;
}
.anatomy-plate {
  inset: 0;
  border-radius: calc(var(--u) * 1.4);
  border: 1px solid rgb(243 235 220 / calc(0.16 * var(--open)));
  background: rgb(243 235 220 / calc(0.03 * var(--open)));
  transition:
    border-color 0.3s,
    background-color 0.3s,
    box-shadow 0.3s;
}
.anatomy-anchor {
  left: 100%;
  top: 100%;
  width: 1px;
  height: 1px;
} /* The rightmost corner once tilted */
#anatomy-stage.is-open .anatomy-layer {
  cursor: pointer;
}
#anatomy-stage.is-open .anatomy-plate {
  pointer-events: auto;
}
.anatomy-layer.is-dim {
  opacity: 0.45;
}
.anatomy-layer.is-lit .anatomy-plate {
  border-color: rgb(169 125 255 / 0.85);
  background: rgb(169 125 255 / 0.07);
  box-shadow: 0 0 calc(var(--u) * 6) rgb(169 125 255 / 0.28);
}
/* 01  The ground: a dark slab, racks, the lock and what it guarantees. */
.anatomy-layer.is-base .anatomy-plate {
  background: rgb(12 11 9 / calc(0.4 + 0.6 * var(--open)));
}
.an-rack {
  left: calc(var(--u) * 8);
  right: calc(var(--u) * 8);
  top: calc(var(--u) * 9.33);
  height: calc(var(--u) * 37.32);
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: calc(var(--u) * 1.6);
  opacity: calc(0.15 + 0.5 * var(--open));
}
.an-rack i {
  border: 1px solid rgb(243 235 220 / 0.14);
  border-radius: calc(var(--u) * 0.5);
  background: repeating-linear-gradient(
    90deg,
    rgb(243 235 220 / 0.09) 0 calc(var(--u) * 0.35),
    transparent 0 calc(var(--u) * 1.1)
  );
}
.an-lock {
  left: 50%;
  top: calc(var(--u) * 27.99);
  width: calc(var(--u) * 9);
  height: calc(var(--u) * 9);
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--color-black);
  border: 1px solid var(--color-accent);
  opacity: var(--open);
}
.an-lock svg {
  width: 55%;
  height: 55%;
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 1.6;
}
.an-chip {
  font-family: var(--mono-font);
  font-size: calc(var(--u) * 1.25);
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1;
  padding: calc(var(--u) * 0.55) calc(var(--u) * 1);
  border-radius: calc(var(--u) * 1);
  border: 1px solid rgb(243 235 220 / 0.25);
  color: rgb(243 235 220 / 0.78);
  background: var(--color-black);
  white-space: nowrap;
}
.anatomy-layer.is-base .an-chip {
  opacity: var(--open);
}
/* 02  The structure. */
.an-region {
  border: 1px dashed rgb(169 125 255 / 0.6);
  border-radius: calc(var(--u) * 0.8);
  opacity: calc(0.25 + 0.75 * var(--open));
}
.an-region span {
  position: absolute;
  left: calc(var(--u) * 0.8);
  top: calc(var(--u) * 0.52);
  font-family: var(--mono-font);
  font-size: calc(var(--u) * 1.2);
  color: var(--color-accent);
}
.an-region.is-thin {
  border-color: rgb(243 235 220 / 0.3);
}
.an-region.is-thin span {
  color: rgb(243 235 220 / 0.6);
}
/*
  03  The grid: the page's 24 columns inside 202 px margins (14.03u, at the
  1440 px frame where a unit is 14.4 px).
*/
.an-grid {
  left: calc(var(--u) * 14.03);
  right: calc(var(--u) * 14.03);
  top: 0;
  bottom: 0;
  display: grid;
  grid-template-columns: repeat(24, 1fr);
  opacity: calc(0.2 + 0.8 * var(--open));
}
.an-grid i {
  background: rgb(169 125 255 / 0.05);
  border-left: 1px solid rgb(169 125 255 / 0.2);
}
.an-grid i:last-child {
  border-right: 1px solid rgb(169 125 255 / 0.2);
}
.an-measure {
  border-left: 1px solid var(--color-accent);
  opacity: var(--open);
}
.an-measure.is-h {
  border-left: 0;
  border-top: 1px solid var(--color-accent);
}
.an-measure span {
  position: absolute;
  left: calc(var(--u) * 0.8);
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--mono-font);
  font-size: calc(var(--u) * 1.2);
  white-space: nowrap;
  color: var(--color-accent);
}
.an-measure.is-h span {
  left: 50%;
  top: calc(var(--u) * 0.52);
  transform: translateX(-50%);
}
/* 04  The surfaces: the page's ground, and the shade under its header. */
.an-surface.is-page {
  inset: 0;
  border-radius: calc(var(--u) * 1.4);
  background: #181818;
}
.an-surface.is-shade {
  left: 0;
  right: 0;
  top: 0;
  height: calc(var(--u) * 9.22);
  border-radius: calc(var(--u) * 1.4) calc(var(--u) * 1.4) 0 0;
  background: linear-gradient(rgb(24 24 24 / 0.7), rgb(24 24 24 / 0));
}
.an-swatches {
  right: calc(var(--u) * 4);
  top: calc(var(--u) * 61.6);
  display: flex;
  gap: calc(var(--u) * 0.6);
  opacity: var(--open);
}
.an-swatches i {
  width: calc(var(--u) * 1.6);
  height: calc(var(--u) * 1.6);
  border-radius: 50%;
  border: 1px solid rgb(243 235 220 / 0.3);
}
/* 05  The pictures: the forest plate, full bleed, and the brand's mark. */
.an-img.is-hero {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: calc(var(--u) * 1.4);
  background: #181818;
}
/* The annotations leave as the page becomes the live site. */
#anatomy-stack .an-chip.is-a11y,
#anatomy-stack .an-focus {
  transition: opacity 0.3s;
}
#anatomy-stack.is-live .an-chip.is-a11y,
#anatomy-stack.is-live .an-focus {
  opacity: 0;
}
#anatomy-live {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  border-radius: calc(var(--u) * 1.4);
  visibility: hidden;
}
.an-mark {
  left: calc(var(--u) * 2.22);
  top: calc(var(--u) * 3.756);
  width: calc(var(--u) * 1.212);
  height: calc(var(--u) * 1.212);
}
/*
  06  The type: one family, Inter Tight, from the 64 px title (4.44u) to the
  12 px captions (0.83u), in the page's warm cream.
*/
.an-brand,
.an-h1,
.an-readout,
.an-box,
.an-cue {
  font-family: 'Inter Tight', var(--display-font);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  color: #f2e8cf;
}
.an-brand {
  left: calc(var(--u) * 3.99);
  top: calc(var(--u) * 3.808);
  font-size: calc(var(--u) * 1.111);
  letter-spacing: 0.22em;
}
/* The title's block is as wide as its first line, so JOINTS centers under
   it. */
.an-h1 {
  left: calc(var(--u) * 29.02);
  width: fit-content;
  top: calc(var(--u) * 25.35);
  font-size: calc(var(--u) * 4.444);
  line-height: 0.906;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  text-align: center;
}
.an-h1 span {
  display: block;
}
.an-readout {
  right: calc(var(--u) * 2.22);
  top: calc(var(--u) * 8.2);
  font-size: calc(var(--u) * 0.833);
  letter-spacing: -0.03em;
  color: rgb(238 232 232 / 0.52);
}
/*
  07  The controls: four boxed links, each as wide as the widest, the
  language pair, and the scroll cue.
*/
.an-nav,
.an-lang {
  top: calc(var(--u) * 3.458);
  display: flex;
}
.an-nav {
  left: calc(var(--u) * 37.67);
  gap: calc(var(--u) * 0.556);
}
.an-lang {
  right: calc(var(--u) * 2.22);
  top: calc(var(--u) * 3.11);
}
.an-box {
  display: grid;
  place-items: center;
  height: calc(var(--u) * 1.806);
  padding: 0 calc(var(--u) * 0.5);
  border: 1px solid rgb(242 232 207 / 0.5);
  background: rgb(0 0 0 / 0.28);
  font-size: calc(var(--u) * 0.833);
  letter-spacing: -0.03em;
  text-transform: uppercase;
}
.an-nav .an-box {
  width: calc(var(--u) * 5.75);
}
.an-box.is-current {
  border-color: #f2e8cf;
}
.an-lang .an-box + .an-box {
  border-left: 0;
}
.an-box.is-on {
  background: #f2e8cf;
  border-color: #f2e8cf;
  color: #181818;
}
.an-cue {
  left: calc(var(--u) * 56);
  top: calc(var(--u) * 57.2);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 0.694);
  font-size: calc(var(--u) * 0.972);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.an-cue svg {
  width: calc(var(--u) * 1.389);
  height: calc(var(--u) * 1.389);
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* 08  The labels nobody sees, which every reader and search engine does. */
.an-focus {
  left: calc(var(--u) * 37.27);
  top: calc(var(--u) * 3.06);
  width: calc(var(--u) * 6.55);
  height: calc(var(--u) * 2.6);
  border: 1.5px dashed var(--color-accent);
  border-radius: calc(var(--u) * 0.3);
  opacity: calc(0.3 + 0.7 * var(--open));
}
.an-chip.is-a11y {
  border-color: rgb(169 125 255 / 0.8);
  color: var(--color-accent);
  background: rgb(15 13 10 / 0.88);
  opacity: calc(0.3 + 0.7 * var(--open));
}
/* The page as a link, above the layer at its right, 1.18 units clear of it. */
.an-link {
  right: 0;
  bottom: calc(100% + var(--u) * 1.18);
  display: flex;
  align-items: center;
  gap: 0.4em;
  padding: calc(var(--u) * 0.8) calc(var(--u) * 1.4);
  border-radius: 999px;
  background: rgb(20 17 14 / 0.92);
  border: 1px solid rgb(243 235 220 / 0.16);
  font-family: var(--text-font);
  font-size: calc(var(--u) * 1.6);
  line-height: 1.2;
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  white-space: nowrap;
  opacity: var(--open);
}
.an-link svg {
  width: 0.8em;
  height: 0.8em;
}
/*
  The labels beside the stack, tied to their layers by leaders
  (sections/anatomy.js).
*/
#anatomy-leaders {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
#anatomy-leaders path {
  fill: none;
  stroke: rgb(243 235 220 / 0.35);
  stroke-width: 1;
}
#anatomy-leaders path.is-lit {
  stroke: var(--color-accent);
}
#anatomy-tags {
  position: absolute;
  z-index: 2;
  right: var(--site-padding-x);
  top: 0;
  width: 13vw;
  margin: 0;
  padding: 0;
  list-style: none;
}
#anatomy-tags li {
  position: absolute;
  right: 0;
  left: 0;
  opacity: 0;
}
#anatomy-tags button {
  display: flex;
  align-items: baseline;
  gap: 0.9em;
  width: 100%;
  padding: 0.35em 0;
  border: 0;
  background: none;
  color: rgb(243 235 220 / 0.72);
  font-family: var(--mono-font);
  font-size: clamp(0.62rem, 0.72vw, 0.8rem);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  text-align: left;
  cursor: pointer;
  transform: translateY(-50%);
  pointer-events: auto;
}
#anatomy-tags b {
  font-weight: 500;
  color: var(--color-accent);
}
#anatomy-tags li.is-lit button {
  color: var(--color-white);
}
@media (max-width: 767.98px) {
  #anatomy-stage {
    left: 0;
    right: 0;
    bottom: 42%;
  }
  #anatomy-stack {
    --pw: 74vw;
  }
  #anatomy-copy {
    top: auto;
    bottom: calc(var(--vh) * 6);
    width: auto;
    right: var(--site-padding-x);
  }
  #anatomy-title {
    font-size: 2rem;
  }
  #anatomy-desc {
    display: none;
  }
  #anatomy-info {
    margin-top: 1.2em;
    min-height: 9em;
  }
  #anatomy-tags,
  #anatomy-leaders {
    display: none;
  }
}

/*****************************************************************************/
/***                                                                       ***/
/***  06  Accessibility.                                                   ***/
/***                                                                       ***/
/*****************************************************************************/
/* The paper peel, the word over the liquid, and the fact cards. */
#sustainability {
  color: var(--color-white);
}
/*
  The screen pinned while the header's block (#sustainability-hero) scrolls
  by; the block's height is set in sections/sustainability.js.
*/
#sustainability-hero-inner {
  position: sticky;
  top: 0;
  height: calc(var(--vh) * 100);
}
#sustainability-tagline {
  position: absolute;
  left: 0;
  width: 100%;
  top: calc(var(--vh) * 5 + var(--site-padding-y));
  text-align: center;
}
#sustainability-title {
  position: absolute;
  left: var(--site-padding-x);
  right: var(--site-padding-x);
  bottom: 50%;
  height: calc((100vw - var(--site-padding-x) * 2) * 0.162);
  margin-bottom: -7%;
}
#sustainability-title-pre {
  position: absolute;
  left: 0;
  bottom: 100%;
  margin-bottom: -0.75em;
}
@media (max-width: 767.98px) {
  #sustainability-title-pre {
    margin-bottom: 0.35em;
  }
} /* Clear of the word's first letters */
/*
  Only its box is used: the word itself is drawn in WebGL, between the
  background and the paper.
*/
#sustainability-title-main {
  font-family: var(--serif-font);
  font-style: normal;
  font-size: 15vw;
  line-height: 1;
  font-weight: 400;
  letter-spacing: -0.02em;
  text-transform: none;
  text-align: center;
  visibility: hidden;
}
/* The giant word over the liquid is upright too, as the title it becomes. */
#sustainability-giant {
  font-style: normal;
}
#sustainability-desc {
  position: absolute;
  left: 0;
  width: 100%;
  top: calc(var(--vh) * 68);
  text-align: center;
  transform: translateY(-50%);
}
#sustainability-items {
  margin-top: calc(var(--site-padding-y) * 2);
  padding: 0 var(--site-padding-x) calc(var(--site-padding-y) * 2);
  grid-template-columns: repeat(16, 1fr);
  row-gap: var(--grid-gap-width);
  color: var(--color-white);
}
/*
  Dark glass (the accessibility cards and the stats bento): a dark body which
  holds the liquid back, so the text inside reads, with the liquid blurred
  through it, a faint cream wash lit from the top left, and a hairline edge.
*/
.glass-card,
.sustainability-item {
  --item-padding: calc(var(--site-padding-x) * 0.55);
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--item-padding);
  border-radius: calc(var(--site-padding-x) * 0.32);
  background:
    linear-gradient(
      155deg,
      rgb(243 235 220 / 0.085),
      rgb(243 235 220 / 0.025) 55%,
      rgb(169 125 255 / 0.06)
    ),
    rgb(17 14 11 / 0.74);
  -webkit-backdrop-filter: blur(22px) saturate(1.15);
  backdrop-filter: blur(22px) saturate(1.15);
  border: 1px solid rgb(243 235 220 / 0.14);
  box-shadow:
    inset 0 1px 0 rgb(243 235 220 / 0.08),
    0 30px 60px -30px rgb(0 0 0 / 0.6);
}
.sustainability-item {
  min-height: var(--grid-span-6);
}
/* Nothing behind with detail to blur (see 'is-backdrop-flat' in main.js). */
.is-backdrop-flat .sustainability-item {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.sustainability-item:nth-child(1) {
  grid-column: span 4;
}
.sustainability-item:nth-child(2),
.sustainability-item:nth-child(3) {
  grid-column: span 6;
}
.sustainability-item.is-wide {
  grid-column: span 8;
  min-height: var(--grid-span-5);
}
/*
  The two icon cards (sections/play.js): a stack of line drawings in depth,
  turned toward the pointer by a 3D rotation of the stack, so its layers part.
*/
.sustainability-item-figure.is-icon {
  perspective: 900px;
  min-height: calc(var(--vh) * 30);
}
.px-icon {
  position: relative;
  height: calc(var(--vh) * 28);
  max-width: 70%;
  aspect-ratio: 1;
  transform-style: preserve-3d;
  will-change: transform;
}
.px-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  will-change: transform;
}
.px-line {
  stroke: var(--color-white);
  stroke-width: 2;
}
.px-line.is-thin {
  stroke: rgb(243 235 220 / 0.6);
  stroke-width: 1.4;
}
.px-fill {
  fill: rgb(15 13 10 / 0.55);
}
.px-faint {
  stroke: rgb(var(--color-accent-rgb) / 0.5);
  stroke-width: 1.2;
}
.px-ticks {
  stroke: rgb(243 235 220 / 0.5);
  stroke-width: 9;
  stroke-linecap: butt;
}
.px-accent {
  stroke: var(--color-accent);
  stroke-width: 2.4;
}
.px-accent-fill {
  fill: var(--color-accent);
}
.px-cream-fill {
  fill: var(--color-white);
}
.px-glyph {
  font-family: var(--serif-font);
  text-anchor: middle;
}
.sustainability-item-label {
  font-family: var(--mono-font);
  font-size: var(--sub2);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgb(243 235 220 / 0.55);
}
.sustainability-item-label b {
  margin-right: 1em;
  font-weight: 500;
  color: var(--color-accent);
}
.sustainability-item-title {
  margin-top: 0.55em;
  max-width: 9em;
  font-family: var(--serif-font);
  font-size: var(--h3);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.005em;
  text-transform: none;
}
.sustainability-item-figure {
  position: relative;
  flex: 1;
  min-height: calc(var(--vh) * 15);
  margin: calc(var(--item-padding) * 0.6) 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.2em;
}
.sustainability-anim {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.sustainability-item-num {
  font-family: var(--serif-font);
  font-size: min(calc(var(--grid-span-2) * 1.05), 22vh);
  line-height: 0.9;
  white-space: nowrap;
}
.sustainability-item-num span {
  color: var(--color-accent);
}
.sustainability-scale {
  --fill: 1;
  width: 92%;
  overflow: visible;
}
.sustainability-scale line {
  stroke-linecap: round;
}
.sustainability-scale .track {
  stroke: rgb(243 235 220 / 0.16);
  stroke-width: 2;
}
.sustainability-scale .fill {
  stroke: var(--color-accent);
  stroke-width: 2;
  stroke-dasharray: 192;
  stroke-dashoffset: calc(192 * (1 - var(--fill)));
}
.sustainability-scale .ticks line {
  stroke: rgb(243 235 220 / 0.35);
  stroke-width: 1;
}
.sustainability-scale .dot {
  fill: var(--color-accent);
  opacity: var(--fill);
}
.sustainability-scale text {
  font-family: var(--mono-font);
  font-size: 13px;
  fill: rgb(243 235 220 / 0.5);
  letter-spacing: 0.04em;
}
.sustainability-scale text.ours {
  fill: var(--color-accent);
}
.sustainability-item-desc {
  max-width: 27em;
  color: rgb(243 235 220 / 0.72);
  line-height: 1.35;
  text-wrap: pretty;
}
@media (max-width: 767.98px) {
  /*
    Its foot clears the scroll prompt (#scroll-prompt in ui.css, 3.5 of its
    ems above the cue, and about 1.2 tall), which comes in under it on the
    last tool, by about 1.3 of the same ems.  At 7% of the screen's height it
    sat on the prompt's word, by about 10 px on an 844 px screen and more on
    a shorter one.
  */
  #grip-zoom-box {
    left: 50%;
    top: auto;
    bottom: calc(var(--site-padding-y) + var(--sub2) * 6);
    width: 84vw;
    transform: translateX(-50%);
  }
  #grip-title {
    font-size: calc(var(--h2) * 0.8);
  }
  #grip-header {
    top: calc(var(--site-padding-y) + var(--site-header) + var(--vh) * 2);
  }
  #sustainability-items {
    grid-template-columns: 1fr;
  }
  .sustainability-item:nth-child(n) {
    grid-column: auto;
    min-height: 80vw;
  }
}

/*****************************************************************************/
/***                                                                       ***/
/***  03  Reviews.                                                         ***/
/***                                                                       ***/
/*****************************************************************************/
/*
  The paper storm (sections/reviews.js, scenes/paperstorm.js): a tall
  section, its length set by the script from its beats, with a fixed stage
  for the headline over the 3D (fixed, not pinned, b/c the question is shown
  on the laptop before the section reaches the screen).
*/
#reviews {
  position: relative;
  color: var(--color-white);
}
#reviews-stage {
  position: fixed;
  inset: 0;
  pointer-events: none;
  visibility: hidden;
}
/*
  The headline: its lines in the same place, one beat after another, in the
  serif with a soft halo, each letter revealed on its own.
*/
#reviews-title {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(92vw, 11em);
  transform: translate(-50%, -50%);
  font-family: var(--serif-font);
  font-weight: 400;
  font-size: calc(var(--h1) * 0.85);
  line-height: 0.95;
  letter-spacing: -0.02em;
  text-align: center;
  text-transform: none;
}
.reviews-line {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  text-shadow:
    0 0 0.04em rgb(255 246 232 / 0.6),
    0 0 0.3em rgb(243 235 220 / 0.28);
}
.reviews-line em {
  font-style: italic;
}
@media (max-width: 767.98px) {
  #reviews-title {
    font-size: calc(var(--h1) * 0.62);
  }
}

/*****************************************************************************/
/***                                                                       ***/
/***  03b  Research.                                                       ***/
/***                                                                       ***/
/*****************************************************************************/
/*
  The laptop's fall past the research (sections/research.js, scenes/fall.js):
  a tall section, its length set by the script from the findings, with a
  pinned stage for the heading over the 3D.
*/
#research {
  position: relative;
  color: var(--color-white);
}
#research-pin {
  position: absolute;
  inset: 0;
}
#research-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100lvh;
  pointer-events: none;
  visibility: hidden;
}
/* The heading, under the laptop as it drops in. */
#research-head {
  position: absolute;
  left: 50%;
  top: 72%;
  width: min(90vw, 15em);
  transform: translate(-50%, -50%);
  font-size: var(--h1);
  text-align: center;
  will-change: transform, opacity;
}
#research-eyebrow {
  font-size: clamp(0.78rem, 1vw, 1rem);
  color: rgb(243 235 220 / 0.7);
}
#research-title {
  margin-top: 0.15em;
  font-family: var(--serif-font);
  font-weight: 400;
  font-size: 1em;
  line-height: 0.95;
  letter-spacing: -0.02em;
  text-transform: none;
  text-shadow: 0 0 0.4em rgb(var(--color-glow) / 0.35);
}
#research-title em {
  font-style: italic;
  color: var(--color-accent);
}
#research-desc {
  margin: 1.2em auto 0;
  max-width: 24em;
  font-size: calc(18 * var(--screen-unit));
  color: rgb(243 235 220 / 0.75);
}
@media (max-width: 767.98px) {
  #research-head {
    font-size: calc(var(--h1) * 0.8);
  }
  #research-desc {
    font-size: var(--body2, 0.95rem);
  }
}

/*****************************************************************************/
/***                                                                       ***/
/***  07  The footer.                                                      ***/
/***                                                                       ***/
/*****************************************************************************/
/* The keycap field behind the closing copy. */
#footer {
  padding-bottom: var(--site-padding-y);
}
#footer .section__inner {
  grid-template-columns: repeat(16, 1fr);
  row-gap: 0;
}
#footer .o-dashline {
  opacity: 0.6;
}
#footer-top {
  grid-column: 1 / -1;
  position: relative;
  margin-left: var(--grid-span-5);
  width: calc(var(--grid-span-width) * 11);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding-top: calc(var(--h2) * 4);
}
#footer-logo {
  font-family: var(--serif-font);
  font-size: calc(var(--h2) * 1.4);
  line-height: 0.8;
  letter-spacing: -0.05em;
}
#footer-head {
  width: calc(var(--grid-span-8) + var(--grid-column-width) / 2);
}
#footer-head-wrap {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}
#footer-title {
  font-family: var(--serif-font);
  font-weight: 400;
  text-transform: none;
  font-size: calc(var(--h2) * 1.3);
  line-height: 0.95;
  letter-spacing: -0.03em;
}
#footer-title span {
  display: block;
}
#footer-title span:nth-child(2) {
  font-style: italic;
  color: var(--color-accent);
  text-align: center;
}
/*
  Centered under the headline's text; #footer-head-wrap is as wide as that
  text.
*/
#footer-link {
  display: block;
  width: var(--grid-span-3);
  text-align: center;
  margin-top: 2.2em;
}
#footer-top {
  padding-bottom: calc(var(--h2) * 4);
}
#footer-contact-wrapper {
  grid-column: 5 / span 4;
  margin-left: var(--grid-column-width);
  display: flex;
  flex-direction: column;
  gap: 3em;
}
#footer-social-wrapper {
  grid-column: 9 / span 2;
  display: flex;
  flex-direction: column;
  gap: 1em;
}
.footer-item-caption {
  opacity: 0.6;
  margin-bottom: 0.4em;
}
#footer-credits {
  grid-column: 1 / -1;
  margin-top: 2em;
  opacity: 0.45;
  text-transform: none;
}
@media (max-width: 767.98px) {
  #footer .section__inner {
    grid-template-columns: 1fr;
  }
  #footer-top,
  #footer-link,
  #footer-contact-wrapper,
  #footer-social-wrapper {
    grid-column: 1 / -1;
    margin-left: 0;
    width: auto;
  }
}

/*****************************************************************************/
/***                                                                       ***/
/***  Phones: the later sections.                                          ***/
/***                                                                       ***/
/*****************************************************************************/
@media (max-width: 767.98px) {
  /* The footer: one column. */
  #footer .section__inner {
    display: block;
  }
  #footer-top {
    width: 100%;
    margin-left: 0;
    flex-direction: column;
    align-items: center;
    padding-top: calc(var(--h2) * 3);
  }
  #footer-top {
    padding-bottom: calc(var(--h2) * 2);
  }
  #footer-head {
    width: 100%;
    margin-top: 1em;
  }
  #footer-head-wrap {
    display: flex;
  }
  #footer-link {
    margin: 2em auto 0;
    width: 100%;
  }
  #footer-link.has-badge {
    display: flex;
    width: 100%;
  }
  #footer-contact-wrapper {
    margin-left: 0;
    margin-bottom: 3em;
  }
  .footer-item-caption {
    margin-bottom: 0.5em;
  }
  #footer-social-wrapper {
    margin-bottom: 2em;
  }
}

/*****************************************************************************/
/***                                                                       ***/
/***  08  Contact.                                                         ***/
/***                                                                       ***/
/*****************************************************************************/
/* The enquiry form, in this site's type and dashed rules. */
#contact .section__inner {
  align-items: start;
  padding-top: calc(var(--site-padding-y) * 6);
  padding-bottom: calc(var(--site-padding-y) * 4);
}
#contact-intro {
  grid-column: 1 / span 7;
}
#contact-tagline {
  color: rgb(243 235 220 / 0.5);
  margin-bottom: 1.2em;
}
#contact-title span {
  color: var(--color-accent);
}
#contact-slots {
  display: flex;
  align-items: center;
  gap: 0.7em;
  margin-top: 2em;
}
#contact-slots-light {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow:
    0 0 6px var(--color-accent),
    0 0 14px rgb(var(--color-accent-rgb) / 0.5);
}
#contact-steps {
  list-style: none;
  margin: 3.5em 0 0;
  padding: 0;
}
#contact-steps li {
  display: grid;
  grid-template-columns: var(--grid-span-2) 1fr;
  column-gap: var(--grid-gap-width);
  padding: 1.3em 0;
  border-top: 1px dashed rgb(243 235 220 / 0.25);
}
#contact-steps li:last-child {
  border-bottom: 1px dashed rgb(243 235 220 / 0.25);
}
.contact-step-num {
  color: var(--color-accent);
  padding-top: 0.35em;
}
#contact-audit {
  margin-top: 2.5em;
  width: var(--grid-span-5);
  opacity: 0.8;
}
#contact-audit span {
  color: var(--color-accent);
}
#contact-form,
#contact-done {
  grid-column: 10 / span 7;
  padding: calc(var(--grid-gap-width) * 1.5);
  border: 1px dashed rgb(243 235 220 / 0.25);
  background: rgb(15 13 10 / 0.72);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
#contact-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--grid-gap-width);
  row-gap: 1.7em;
}
#contact-form[hidden],
#contact-done[hidden] {
  display: none;
}
.contact-field {
  grid-column: 1 / -1;
  position: relative;
}
.contact-field.is-half {
  grid-column: span 1;
}
.contact-field label {
  display: block;
  margin-bottom: 0.5em;
  opacity: 0.6;
}
.contact-field label span {
  text-transform: none;
}
.contact-field :is(input, select, textarea) {
  display: block;
  width: 100%;
  min-width: 0;
  padding: 0.45em 0;
  background: none;
  border: 0;
  border-radius: 0;
  outline: 0;
  color: var(--color-white);
  font: 400 max(16px, var(--body2)) / 1.3 var(--text-font);
}
.contact-field input::placeholder {
  color: var(--color-white);
  opacity: 0.3;
}
.contact-field select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  padding-right: 1.5em;
  background:
    linear-gradient(45deg, transparent 50%, currentColor 50%) calc(100% - 0.55em) 50% / 0.35em
      0.35em no-repeat,
    linear-gradient(135deg, currentColor 50%, transparent 50%) calc(100% - 0.2em) 50% / 0.35em
      0.35em no-repeat;
}
.contact-field option {
  background: var(--color-black);
  color: var(--color-white);
}
.contact-field textarea {
  resize: none;
  height: 5.5em;
}
.contact-field:focus-within .o-dashline {
  --dashline-color: var(--color-accent);
}
.contact-field:focus-within label {
  opacity: 1;
  color: var(--color-accent);
}
.contact-field:has(:user-invalid) .o-dashline {
  --dashline-color: #ff7b6b;
}
.contact-field:has(:user-invalid) label {
  opacity: 1;
  color: #ff7b6b;
}
#contact-form-foot {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 1.5em;
  margin-top: 0.4em;
}
#contact-submit:disabled {
  opacity: 0.6;
  cursor: progress;
}
#contact-status {
  opacity: 0.6;
  line-height: 1.3;
}
#contact-status.is-error {
  opacity: 1;
  color: #ff7b6b;
  text-transform: none;
}
/*
  The thanks rises in where the form was (shown from display: none, so it
  starts from its starting style); the form itself just goes.
*/
#contact-done {
  display: flex;
  flex-direction: column;
  gap: 1em;
  transition:
    opacity 0.4s var(--ease-out),
    transform 0.4s var(--ease-out);
  outline: 0;
}
@starting-style {
  #contact-done {
    opacity: 0;
    transform: translateY(0.6em);
  }
}
#contact-done h3 {
  color: var(--color-accent);
}
#contact-done a {
  color: var(--color-accent);
}
#footer-social-wrapper {
  gap: 0;
}
#footer-social-wrapper .footer-item-caption:not(:first-child) {
  margin-top: 1.5em;
}

@media (max-width: 767.98px) {
  #contact .section__inner {
    display: block;
    padding-top: calc(var(--h2) * 3);
  }
  #contact-steps {
    margin-top: 2.5em;
  }
  #contact-steps li {
    grid-template-columns: 1fr;
    row-gap: 0.5em;
  }
  #contact-audit {
    width: auto;
  }
  #contact-form,
  #contact-done {
    margin-top: 3em;
    padding: 1.4em 1.1em;
    column-gap: 0.8em;
  }
  #contact-form-foot {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    gap: 1em;
  }
  #contact-submit {
    width: 100%;
  }
}

/*
  The manifesto (sections/manifesto.js): a sticky stage which the section
  scrolls through while the words fill from faint to cream, with the filling
  edge in the accent.  The type is Inter Tight Light, large and tight, with the
  closing clause in the serif italic.  The chips sit in the line like words, a
  cap height tall.
*/
#manifesto {
  position: relative;
}
#manifesto-pin {
  position: relative;
  height: 300vh;
}
#manifesto-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100lvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 var(--site-padding-x);
  box-sizing: border-box;
}
#manifesto-eyebrow {
  color: rgb(243 235 220 / 0.5);
  margin-bottom: 2.2em;
  font-family: var(--mono-font);
  letter-spacing: 0.04em;
}
#manifesto-text {
  margin: 0;
  max-width: 15.5em;
  font-family: 'Inter Tight', var(--display-font);
  font-weight: 300;
  font-size: calc(124 * var(--screen-unit));
  line-height: 1.02;
  letter-spacing: -0.045em;
  color: rgb(243 235 220 / 0.13);
}
#manifesto-text em {
  font-family: var(--serif-font);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
  padding-right: 0.06em;
}
.mf-w {
  color: rgb(243 235 220 / 0.13);
}
.mf-chip {
  display: inline-flex;
  align-items: center;
  vertical-align: -0.06em;
  height: 0.74em;
  margin: 0 0.06em;
  border-radius: 0.37em;
  overflow: hidden;
  transform-origin: 50% 60%;
}
.mf-chip--shot {
  width: 1.5em;
  background: #1a1611;
}
.mf-chip--shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.mf-chip--box {
  gap: 0.5em;
  padding: 0 0.5em 0 0.4em;
  border: 0.045em solid currentColor;
  border-radius: 0.14em;
  font-family: var(--mono-font);
  font-size: 0.27em;
  height: 2.7em;
  letter-spacing: 0;
  vertical-align: 0.55em;
}
.mf-chip--box > b {
  font-weight: 500;
  font-size: 2em;
  line-height: 1;
  padding: 0 0.25em 0 0;
  border-right: 0.07em solid currentColor;
}
.mf-chip--box > span {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}
.mf-chip--box b,
.mf-chip--box small {
  font-weight: 500;
  font-size: 1em;
}
.mf-chip--box small {
  opacity: 0.7;
  text-transform: uppercase;
  font-size: 0.8em;
}

/*
  The marquee: a band of giant type which runs on its own, faster with the
  scroll and in the scroll's direction.  One link to the form.
*/
#marquee {
  position: relative;
  display: block;
  overflow: hidden;
  padding: 0.1em 0 0.18em;
  margin-bottom: calc(var(--site-padding-y) * 2);
  border-top: 1px solid rgb(243 235 220 / 0.16);
  border-bottom: 1px solid rgb(243 235 220 / 0.16);
  color: var(--color-white);
  text-decoration: none;
  font-size: calc(200 * var(--screen-unit));
  line-height: 1;
}
#marquee-track {
  display: flex;
  width: max-content;
  will-change: transform;
}
.marquee-copy {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  white-space: nowrap;
}
.mq-sans {
  font-family: var(--display-font);
  font-weight: 600;
  letter-spacing: -0.055em;
  text-transform: uppercase;
  padding: 0 0.12em;
}
.mq-serif {
  font-family: var(--serif-font);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.02em;
  padding: 0 0.14em 0.06em;
}
.mq-star {
  font-style: normal;
  font-size: 0.5em;
  color: var(--color-accent);
  padding: 0 0.3em;
  display: inline-block;
}
#marquee .mq-sans,
#marquee .mq-serif {
  transition: color 0.35s;
}
#marquee:hover .mq-sans,
#marquee:focus-visible .mq-sans {
  color: var(--color-accent);
}
@media (max-width: 767.98px) {
  #manifesto-pin {
    height: 190vh;
  }
  #manifesto-text {
    font-size: calc(46 * var(--screen-unit));
    max-width: none;
  }
  #marquee {
    font-size: calc(84 * var(--screen-unit));
  }
}

/*
  The contact plate: a short list, a small label over a hairline and the value
  in the serif beside it.
*/
#footer-plate {
  grid-column: 5 / -1;
  margin-left: var(--grid-column-width);
  display: flex;
  flex-direction: column;
  border-top: 1px solid rgb(243 235 220 / 0.18);
}
.plate-line {
  display: grid;
  grid-template-columns: 7.5em 1fr;
  align-items: baseline;
  padding: calc(26 * var(--screen-unit)) 0;
  border-bottom: 1px solid rgb(243 235 220 / 0.18);
  color: var(--color-white);
  text-decoration: none;
  transition: color 0.3s;
}
.plate-label {
  opacity: 0.5;
}
.plate-value {
  font-family: var(--serif-font);
  font-weight: 400;
  font-size: calc(64 * var(--screen-unit));
  line-height: 1.1;
  letter-spacing: -0.015em;
  overflow-wrap: anywhere;
}
a.plate-line:hover,
a.plate-line:focus-visible {
  color: var(--color-accent);
}
.plate-time {
  display: inline-block;
  margin-left: 0.6em;
  padding: 0.45em 0.9em;
  border: 1px solid currentColor;
  border-radius: 2em;
  letter-spacing: 0.02em;
  vertical-align: 0.6em;
  font-variant-numeric: tabular-nums;
  opacity: 0.7;
  white-space: nowrap;
}
#footer-plate-note {
  margin-top: 2em;
  opacity: 0.6;
}
#footer-privacy {
  align-self: flex-start;
  margin-top: 0.8em;
  opacity: 0.6;
  text-decoration: none;
  transition: opacity 0.3s;
}
#footer-privacy:hover,
#footer-privacy:focus-visible {
  opacity: 1;
}

/* The wordmark across the full width; footer.js sizes it to fit. */
#footer-wordmark {
  grid-column: 1 / -1;
  margin-top: calc(var(--site-padding-y) * 1.5);
  overflow-x: clip;
  overflow-y: visible;
}
#footer-wordmark-text {
  display: inline-block;
  font-family: var(--serif-font);
  font-weight: 400;
  font-size: 200px;
  white-space: nowrap;
  color: var(--color-white);
  line-height: 0.9;
  padding-bottom: 0.14em;
}
@media (max-width: 767.98px) {
  #footer-plate {
    grid-column: 1 / -1;
    margin-left: 0;
    margin-top: 3em;
  }
  .plate-line {
    grid-template-columns: 1fr;
    gap: 0.6em;
    padding: 1.1em 0;
  }
  .plate-value {
    font-size: calc(30 * var(--screen-unit));
  }
}

/* Pointing at one of the contact plate's lines dims the rest. */
@media (hover: hover) {
  .plate-line {
    transition:
      opacity 0.45s var(--ease-glide),
      color 0.3s;
  }
  #footer-plate:has(.plate-line:hover) .plate-line:not(:hover) {
    opacity: 0.3;
  }
}

/*
  The last card opened to the full screen, and the type zoom into the work
  index (sections/index-zoom.js).  Under the header and the cue.  It isolates
  its own blend, so the black layer's multiply meets only the picture under
  it: white type shows the picture, the black round it hides it.
*/
#index-zoom {
  position: fixed;
  inset: 0;
  z-index: 9;
  isolation: isolate;
  overflow: hidden;
  pointer-events: none;
  visibility: hidden;
}
#index-zoom-scene,
#index-zoom-sheet,
#index-zoom-still,
#index-zoom-black {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
#index-zoom-still {
  object-fit: cover;
}
/*
  The card once open: its own parallax (lent by the gallery's card), in a 16:9
  box covering the screen, centered as the sheet's last frame is; it takes the
  sheet's place ('is-full').
*/
#index-zoom-card {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--iz-w, 100%);
  height: var(--iz-h, 100%);
  transform: translate(-50%, -50%);
  visibility: hidden;
}
#index-zoom-card > * {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
#index-zoom.is-full #index-zoom-card {
  visibility: inherit;
}
#index-zoom.is-full #index-zoom-sheet,
#index-zoom.is-full #index-zoom-still {
  visibility: hidden;
}
/* The base styles display every image and canvas, which overrides 'hidden'. */
#index-zoom-sheet[hidden],
#index-zoom-still[hidden] {
  display: none;
}
/* Out of sight by its opacity, not 'hidden', so its type can be measured. */
#index-zoom-black {
  background: #000;
  mix-blend-mode: multiply;
  opacity: 0;
}
#index-zoom-type,
#index-zoom-white {
  position: absolute;
  left: 0;
  top: 0;
  color: #fff;
  white-space: nowrap;
  transform-origin: 0 0;
}
/* The name in its own white, over the knockout, faded in as it lands. */
#index-zoom-white {
  color: var(--color-white);
  opacity: 0;
}
/*
  The invite on the open card, in its top right under the header's pills
  (sections/sim-invite.js).  Above the overlay, so the button takes the
  pointer.
*/
#sim-invite {
  position: fixed;
  right: var(--site-padding-x);
  top: calc(var(--site-padding-y) * 2 + 3.5rem);
  z-index: 9;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  gap: calc(var(--vh) * 2.6);
  visibility: hidden;
  pointer-events: none;
}
#sim-invite-text {
  max-width: 14em;
  font-size: clamp(1.1rem, 1.6vw, 1.6rem);
  line-height: 1.2;
  text-wrap: balance;
}

/* The work index (sections/workindex.js). */
#work-index {
  position: relative;
  isolation: isolate;
  padding: calc(var(--vh) * 22) 0 calc(var(--vh) * 26);
}
#work-index-tint {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--wi-tint, #15120f);
  opacity: 0;
  transition:
    opacity 0.7s var(--ease-glide),
    background-color 0.7s;
  pointer-events: none;
}
#work-index-tint::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    var(--color-ground),
    transparent 22%,
    transparent 78%,
    var(--color-ground)
  );
}
#work-index-preview {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1;
  pointer-events: none;
  visibility: hidden;
}
#work-index-inner {
  position: relative;
  z-index: 2;
  padding: 0 var(--site-padding-x);
}
#work-index-head {
  display: flex;
  flex-direction: column;
  gap: calc(var(--vh) * 7);
  margin-bottom: 1.2em;
}
#work-index-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
#work-index-ring {
  width: calc(var(--grid-span-6));
  height: calc(var(--grid-span-6) * 0.62);
  margin-right: calc(var(--grid-span-width) * -0.3);
}
@media (max-width: 767.98px) {
  #work-index-ring {
    width: 46vw;
    height: 30vw;
  }
}
#work-index-title {
  margin: 0;
  font-family: 'Inter Tight', var(--display-font);
  font-weight: 200;
  font-size: calc(150 * var(--screen-unit));
  line-height: 0.9;
  letter-spacing: -0.055em;
}
#work-index-title sup {
  font-family: var(--mono-font);
  font-weight: 400;
  font-size: 0.16em;
  letter-spacing: 0;
  vertical-align: top;
  position: relative;
  top: 0.5em;
  margin-left: 0.5em;
  color: var(--color-accent);
}
#work-index-cols,
.wi-link {
  display: grid;
  grid-template-columns:
    var(--grid-span-1) calc(var(--grid-span-8) + var(--grid-gap-width) * 2)
    var(--grid-span-3) var(--grid-span-3) 1fr;
  column-gap: var(--grid-gap-width);
  align-items: baseline;
}
#work-index-cols {
  color: rgb(243 235 220 / 0.45);
  padding-bottom: 1em;
}
#work-index-cols span:first-child {
  grid-column: 2;
}
#work-index-cols span:last-child {
  text-align: right;
}
#work-index-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid rgb(243 235 220 / 0.14);
}
.wi-row {
  border-top: 1px solid rgb(243 235 220 / 0.14);
  transition: opacity 0.5s var(--ease-glide);
}
.wi-link {
  color: var(--color-white);
  text-decoration: none;
  padding: 0.32em 0 0.26em;
}
.wi-num {
  font-family: var(--mono-font);
  font-size: var(--sub2);
  color: rgb(243 235 220 / 0.5);
  align-self: center;
}
.wi-name {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.15em;
  font-family: 'Inter Tight', var(--display-font);
  font-weight: 200;
  font-size: calc(104 * var(--screen-unit));
  line-height: 1;
  letter-spacing: -0.05em;
  white-space: nowrap;
  transition: transform 0.6s var(--ease-glide);
}
.wi-sector,
.wi-disc {
  color: rgb(243 235 220 / 0.7);
}
.wi-year {
  text-align: right;
  color: rgb(243 235 220 / 0.5);
}
@media (hover: hover) {
  #work-index-list:has(.wi-row:hover) .wi-row:not(:hover) {
    opacity: 0.22;
  }
  /* (a slide only: tracking the name out re-laid the large line every frame) */
  .wi-row:hover .wi-name {
    transform: translate3d(0.18em, 0, 0);
  }
}
@media (max-width: 767.98px) {
  #work-index-cols {
    display: none;
  }
  .wi-link {
    grid-template-columns: 2.2em 1fr;
    row-gap: 0.3em;
    padding: 0.9em 0;
  }
  .wi-name {
    font-size: calc(42 * var(--screen-unit));
  }
  .wi-sector {
    grid-column: 2;
  }
  .wi-disc,
  .wi-year {
    display: none;
  }
  #work-index-title {
    font-size: calc(64 * var(--screen-unit));
  }
}

/*
  Reduced motion: the fades and color changes stay, and the movement goes.
  The menu's cards fade without dropping, the live dots pulse in opacity
  only, the hover nudges and the badge's arrow swap happen at once, and the
  menu's label and the contact thanks fade in where they stand.  (The letter
  flippers' rule is in base.css; the scripts read 'props.reduced'.)
*/
@media (prefers-reduced-motion: reduce) {
  #site-menu-card,
  #site-menu-cta,
  #site-menu-contact {
    transform: none;
  }
  .live-pill b {
    animation-name: live-fade;
  }
  .site-menu-name,
  #site-menu-cta-title svg,
  .wi-name,
  .btn-badge,
  .btn-badge svg {
    transition: none;
  }
  #site-header-menu-btn > span {
    transition: opacity 0.25s var(--ease-out);
  }
  #contact-done {
    transition: opacity 0.4s var(--ease-out);
  }
}
@keyframes live-fade {
  50% {
    opacity: 0.25;
  }
}