/*****************************************************************************/
/***                                                                       ***/
/***  01  The hero.                                                        ***/
/***                                                                       ***/
/*****************************************************************************/
#hero {
  --active-ratio: 1;
  height: calc(var(--vh) * 100);
}
#hero .section__inner {
  padding-top: var(--site-padding-y);
  padding-bottom: var(--site-padding-y);
}
/* A quiet credit line runs along the bottom, over the desk. */
#hero-meta {
  position: absolute;
  left: var(--site-padding-x);
  right: var(--site-padding-x);
  bottom: calc(var(--site-padding-y) * 1.1);
  display: flex;
  gap: 2.2em;
  align-items: baseline;
  white-space: nowrap;
  text-shadow: 0 1px 12px #0008;
  will-change: opacity;
}
#hero-meta span + span {
  opacity: 0.72;
}
#hero-meta span + span::before {
  content: '';
  display: inline-block;
  width: 0.42em;
  height: 0.42em;
  margin-right: 2.2em;
  border-radius: 50%;
  background: currentColor;
  vertical-align: 0.08em;
  opacity: 0.8;
}
/*
  The hero's scroll prompt (its look is '.scroll-prompt', in ui.css), centered
  on the credit line's row.  It comes in after the credit line and goes at
  the first scroll (sections/hero.js).
*/
#hero-scroll {
  position: absolute;
  left: 50%;
  bottom: calc(var(--site-padding-y) * 1.1);
  transform: translateX(-50%);
}
@media (max-width: 767.98px) {
  #hero-meta {
    flex-direction: column;
    gap: 0.35em;
    bottom: calc(var(--site-padding-y) * 3.2);
    white-space: normal;
  }
  #hero-meta span + span::before {
    display: none;
  }
  /* Under the credit line, on the scroll cue's row (its ring is 2.6em). */
  #hero-scroll {
    left: var(--site-padding-x);
    bottom: calc(var(--site-padding-y) + 0.75em);
    transform: none;
  }
}

/*****************************************************************************/
/***                                                                       ***/
/***  02  What we do.                                                      ***/
/***                                                                       ***/
/*****************************************************************************/
#statement {
  height: calc(var(--vh) * 955);
} /* The search, then "What we do" with the showcase on the laptop (sections/search.js, sections/statement.js) */
#mobile {
  height: calc(var(--vh) * 810);
} /* The hand's beat (sections/mobile.js) */
#mobile .section__inner {
  pointer-events: none;
}
#statement-pre {
  position: absolute;
  inset: 0;
}
/* The search's headline, left of the laptop (sections/search.js). */
#search-head {
  position: absolute;
  z-index: 2;
  left: var(--site-padding-x);
  /* A little under center: about 28 px at 1440 x 900. */
  top: calc(50% + var(--h2) * 0.55);
  width: min(30vw, 30rem);
  transform: translateY(-50%);
  pointer-events: none;
  visibility: hidden;
  text-shadow:
    0 2px 18px rgb(0 0 0 / 0.75),
    0 0 2px rgb(0 0 0 / 0.4);
}
#search-tagline {
  color: var(--color-white);
  opacity: 0;
}
/* As wide as its first line, so the larger italic centers under it. */
#search-title {
  width: fit-content;
  margin-top: 0.3em;
  text-align: center;
  text-transform: none;
}
#search-title em {
  display: inline-block;
  margin-top: 0.162em;
  font-size: 1.364em;
  font-style: italic;
  color: var(--color-accent);
}
@media (max-width: 767.98px) {
  #search-head {
    right: var(--site-padding-x);
    top: calc(var(--site-padding-y) + var(--site-header) + var(--vh) * 2);
    width: auto;
    transform: none;
    text-align: center;
  }
  #search-title {
    width: auto;
    font-size: calc(var(--h2) * 0.82);
  }
}
/*
  A shade of the page's ground under the statement and the copy, so they read
  over the showcase's close shots, whose screen can fill the frame (its level,
  --scrim, from statement.js).
*/
#statement-pre::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: var(--scrim, 0);
  background: linear-gradient(
    90deg,
    rgb(var(--color-ground-rgb) / 0.9) 0%,
    rgb(var(--color-ground-rgb) / 0.78) 28%,
    rgb(var(--color-ground-rgb) / 0) 50%
  );
  pointer-events: none;
}
#statement-pre-title {
  position: absolute;
  left: var(--site-padding-x);
  top: calc(var(--vh) * 13);
  width: calc(var(--grid-span-width) * 6);
  font-family: var(--serif-font);
  font-weight: 400;
  font-size: calc(112 * var(--screen-unit));
  line-height: 0.9;
  letter-spacing: -0.035em;
  text-transform: none;
  will-change: transform;
}
#statement-pre-title em {
  font-style: italic;
  color: var(--color-accent);
  letter-spacing: -0.02em;
}
/*
  Under the statement, left of the framed laptop (its screen starts 38.5% in:
  FRAME in scenes/desk.js).
*/
#statement-pre-side {
  position: absolute;
  left: var(--site-padding-x);
  bottom: calc(var(--vh) * 12);
  width: calc(var(--grid-span-width) * 4);
  will-change: transform;
}
#statement-pre-body {
  margin-bottom: 2.2em;
  color: rgb(243 235 220 / 0.72);
}
#statement-pre-caption {
  opacity: 0;
  padding-bottom: 0.8em;
  margin-bottom: 1.1em;
  border-bottom: 1px solid rgb(var(--color-accent-rgb) / 0.35);
  color: rgb(243 235 220 / 0.5);
}
/* What we make comes in line by line (statement.js). */
#statement-offer > * {
  opacity: 0;
  will-change: opacity, transform;
}
.statement-offer-title {
  margin: 0 0 0.35em;
  text-wrap: balance;
  font-family: var(--serif-font);
  font-weight: 400;
  font-size: calc(54 * var(--screen-unit));
  line-height: 1;
  letter-spacing: -0.02em;
}
.statement-offer-desc {
  margin: 0 0 1.1em;
}
.statement-offer-tags {
  color: var(--color-accent);
}
#mobile-header {
  position: absolute;
  left: 50%;
  text-align: center;
  top: var(--site-padding-y);
  transform: translate3d(-50%, calc(var(--vh) * 8), 0);
}
/* An h2 (the page keeps one h1), set at the h1's size. */
#mobile-title {
  position: relative;
  white-space: nowrap;
  text-transform: none;
  font-size: calc(var(--h1) * 1.16);
  line-height: 0.86;
  letter-spacing: -0.035em;
}
#mobile-title sup {
  position: absolute;
  font-size: 0.4em;
  margin-top: 0.2em;
}
/*
  A stat under the title (StatCounter, 2026: phones are 52 to 54% of web
  traffic), smaller than a one-word tagline and wrapped to two lines, so it
  stays right of the phone.
*/
#mobile-tagline {
  position: absolute;
  color: var(--color-accent);
  right: 0.2em;
  top: 100%;
  margin-top: 0.6em;
  width: 14.5em;
  text-align: right;
  text-wrap: balance;
  font-size: calc(var(--sub1) * 0.85);
  line-height: 1.25;
}
/* Two whole lines, their right edge at the end of the 13th grid span. */
#mobile-desc {
  position: absolute;
  right: calc(100% - var(--site-padding-x) - var(--grid-span-width) * 13);
  top: 80%;
  white-space: nowrap;
  text-align: right;
  transform: translateY(-50%);
}
#mobile-desc span {
  display: block;
}
/* Above the scroll cue, which sits bottom right through this section. */
#mobile-disclaimer-wrapper {
  position: absolute;
  text-align: right;
  right: var(--site-padding-x);
  width: var(--grid-span-2);
  bottom: calc(var(--site-padding-y) + var(--sub2) * 3.2);
  white-space: nowrap;
}
#mobile-disclaimer-wrapper .o-dashline {
  display: inline-block;
  margin-top: 1em;
  opacity: 0.5;
  width: 0;
}
#mobile-disclaimer {
  margin-top: 1em;
  opacity: 0.5;
}
#mobile-disclaimer span {
  display: block;
}
@media (max-width: 767.98px) {
  #statement-pre-title {
    top: calc(var(--site-padding-y) * 2 + var(--site-header) + var(--vh) * 3);
    width: calc(100vw - var(--site-padding-x) * 2);
    font-size: calc(66 * var(--screen-unit));
    line-height: 0.92;
  }
  #statement-pre-side {
    right: var(--site-padding-x);
    width: auto;
    bottom: calc(var(--vh) * 6);
  }
  #statement-pre::before {
    background: linear-gradient(
      180deg,
      rgb(var(--color-ground-rgb) / 0.92) 0%,
      rgb(var(--color-ground-rgb) / 0.85) 24%,
      rgb(var(--color-ground-rgb) / 0) 36%,
      rgb(var(--color-ground-rgb) / 0) 60%,
      rgb(var(--color-ground-rgb) / 0.9) 72%
    );
  }
  /* On a phone the laptop takes the middle; what we make alone fits under
     it. */
  #statement-pre-body {
    display: none;
  }
  .statement-offer-title {
    font-size: calc(30 * var(--screen-unit));
  }
  .statement-offer-desc {
    margin-bottom: 0.7em;
  }
  #mobile-title {
    white-space: normal;
    text-align: left;
  }
  #mobile-desc {
    top: 85%;
    right: auto;
    left: var(--site-padding-x);
    text-align: left;
  }
  /*
    Centered with left: 50%, the header's shrink-to-fit width is capped at half
    the screen, which broke the title mid-word; on phones it spans the padded
    width instead.
  */
  #mobile-header {
    left: var(--site-padding-x);
    right: var(--site-padding-x);
    transform: translate3d(0, calc(var(--vh) * 6), 0);
  }
  #mobile-title {
    font-size: 15vw;
    text-align: center;
  }
}

/*****************************************************************************/
/***                                                                       ***/
/***  08  The gallery.                                                     ***/
/***                                                                       ***/
/*****************************************************************************/
/* The framed product, the giant type and the gallery. */
#wearable {
  --small-size: calc(var(--vh) * 80 * 0.6);
  --main-width: calc(var(--vh) * 80 * 85 / 110);
  --main-height: calc(var(--vh) * 80);
  --px: calc(var(--main-width) / 850);
  --wide-width: min(56vw, calc(var(--vh) * 60 * 16 / 9));
  --wide-height: calc(var(--wide-width) * 9 / 16);
  --card-radius: calc(var(--wide-width) * 0.02);
  --thumb-scale: 0.22;
  --thumb-width: calc(var(--thumb-scale) * var(--wide-width));
  --thumb-height: calc(var(--thumb-scale) * var(--wide-height));
  --thumb-gap: calc(var(--thumb-width) * 0.08);
}
#wearable-copy {
  --desc-aspect: 5.959;
  --desc-from-width: calc(100vw - var(--site-padding-x) * 2);
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--desc-from-width);
  height: calc(var(--desc-from-width) / var(--desc-aspect));
  transform: translate(-50%, -64%);
}
#wearable-title-2-dummy {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--desc-from-width);
  height: calc(var(--desc-from-width) / var(--desc-aspect));
}
#wearable-title {
  position: absolute;
  left: 0;
  top: -1.8em;
}
#wearable-title span {
  display: inline-block;
  opacity: 0;
  font-family: var(--serif-font);
  font-weight: 400;
  font-style: italic;
  font-size: 1.9em;
  letter-spacing: -0.035em;
  margin-top: 0.05em;
  text-transform: none;
}
#wearable-main {
  --card-w: var(--main-width);
  --card-h: var(--main-height);
  --card-r: 0px;
  position: absolute;
  width: var(--main-width);
  height: var(--main-height);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  /*
    Only a sizing box, wider than the card on a tablet held upright; it lets
    taps through to the thumbnails either side, and the card takes its own.
  */
  pointer-events: none;
}
#wearable-main-small {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--small-size);
  height: var(--small-size);
  transform: translate(-50%, -50%);
}
/*
  The size probe for the 16:9 project cards (the frame morphs between it and
  #wearable-main).
*/
#wearable-main-wide {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--wide-width);
  height: var(--wide-height);
  border-radius: var(--card-radius);
  transform: translate(-50%, -50%);
  visibility: hidden;
  pointer-events: none;
}
#wearable-main-canvas {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
#wearable-gallery-wrapper {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--card-w);
  height: var(--card-h);
  border-radius: var(--card-r);
  transform: translate(-50%, -50%);
  overflow: hidden;
  pointer-events: auto;
}
#wearable-gallery-move-container {
  position: absolute;
  display: flex;
  width: 700%;
  height: 100%;
}
.wearable-gallery-item {
  position: relative;
  flex: none;
  width: var(--card-w);
  height: 100%;
  overflow: hidden;
}
.wearable-gallery-item img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}
/*
  The depth card is rendered at 16:9, and covers the card while the frame
  morphs.
*/
.wearable-gallery-item .depth-card {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--card-h) * 16 / 9);
  height: var(--card-h);
  transform: translate(-50%, -50%);
}
/*
  A hero card's type and UI: flat, over the depth card (the same 16:9 box,
  cropped the same way).  It is a canvas drawn at the wide card's exact pixel
  size (drawCardUi() in wearable.js); its box is that size, moved onto whole
  device pixels, and only scaled while the frame morphs.
*/
.wearable-gallery-item .card-ui {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--ui-w, calc(var(--card-h) * 16 / 9));
  height: var(--ui-h, var(--card-h));
  transform: translate(calc(-50% + var(--ui-dx, 0px)), calc(-50% + var(--ui-dy, 0px)))
    scale(var(--card-scale, 1));
  pointer-events: none;
}
.wearable-gallery-item-inner {
  position: relative;
  height: 100%;
  will-change: transform;
}
.wearable-gallery-thumbs-wrapper {
  position: absolute;
  top: 0;
  width: calc((100vw - var(--wide-width)) / 2 - var(--thumb-gap) - 7px);
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}
.wearable-gallery-thumbs-wrapper.is-left {
  left: 0;
}
.wearable-gallery-thumbs-wrapper.is-left .wearable-gallery-thumbs-move-container {
  left: 100%;
}
.wearable-gallery-thumbs-wrapper.is-left .wearable-gallery-thumb-item {
  margin-left: var(--thumb-gap);
}
.wearable-gallery-thumbs-wrapper.is-left .wearable-gallery-thumb-item:last-child {
  display: none;
}
.wearable-gallery-thumbs-wrapper.is-right {
  right: 0;
}
.wearable-gallery-thumbs-wrapper.is-right .wearable-gallery-thumb-item {
  margin-right: var(--thumb-gap);
}
.wearable-gallery-thumbs-wrapper.is-right .wearable-gallery-thumb-item:first-child {
  display: none;
}
.wearable-gallery-thumbs-move-container {
  position: absolute;
  display: flex;
  width: calc(var(--thumb-width) * 6 + var(--thumb-gap) * 6);
  height: var(--thumb-height);
  top: 50%;
  transform: translateY(-50%);
}
.wearable-gallery-thumb-item {
  position: relative;
  flex: none;
  width: var(--thumb-width);
  height: var(--thumb-height);
  opacity: 0.5;
  overflow: hidden;
  border-radius: calc(var(--card-radius) * 0.4);
  pointer-events: auto;
  cursor: pointer;
  transition: opacity 0.25s;
}
/* Hover only where there is one; on a tablet a tap would leave it lit. */
@media (hover: hover) {
  .wearable-gallery-thumb-item:hover {
    opacity: 0.85;
  }
}
.wearable-gallery-thumb-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* The pulse of a "Live" dot (ui.css). */
@keyframes live-pulse {
  50% {
    opacity: 0.25;
    transform: scale(0.7);
  }
}
#wearable-giant {
  font-size: 1px;
  color: var(--color-white);
}
/*
  The word's glow: a bright copy with a warm halo, revealed by a soft radial
  mask growing from its center.
*/
#wearable-giant-glow {
  font-size: 100px;
  color: #fff8ee;
  text-shadow:
    0 0 0.04em rgba(255, 246, 232, 0.9),
    0 0 0.16em rgb(var(--color-halo-light) / 0.55),
    0 0 0.45em rgb(var(--color-halo) / 0.3);
}
/*
  Baked (bakeGlow() in wearable.js): the live text keeps the box, and the
  canvas shows the glow.
*/
#wearable-giant-glow.is-baked {
  color: transparent;
  text-shadow: none;
}
/*
  A frosted pane in the drawn frame: it blurs the word behind the phone as the
  frame grows.
*/
#wearable-frost {
  position: absolute;
  left: 0;
  top: 0;
  visibility: hidden;
  transform-origin: 0 0;
  will-change: transform, backdrop-filter;
}
@media (max-width: 767.98px) {
  #wearable {
    --small-size: min(var(--vh) * 80 * 0.6, 80vw);
    --main-width: var(--small-size);
    --main-height: calc(var(--small-size) * 110 / 85);
    --wide-width: calc(100vw - 32px);
  }
}