/* Every value is written down here once. Loaded by every page. */

:root {
  /* ─── Brand ─── */
  --black: #0F0F0F;
  --ink:   #1D1D1B;
  --cream: #F4EFE8;
  --red:   #791B25;

  /* The same two colours as components, so a translucent variant can be a
     token instead of a retyped rgba(). */
  --ink-rgb:   29, 29, 27;
  --cream-rgb: 244, 239, 232;

  /* ─── Surfaces ─── */
  /* The homepage and the footer sit on dark, everything else on light, so
     muted text and rules are two values rather than one. */
  --muted-on-dark:  rgba(var(--cream-rgb), 0.55);
  --muted-on-light: rgba(var(--ink-rgb), 0.72);
  --line-on-dark:   rgba(var(--cream-rgb), 0.1);
  --line-on-light:  rgba(var(--ink-rgb), 0.12);
  --subdued:        #595854;

  /* Light is the common case, so that is what an unbound page gets. */
  --muted: var(--muted-on-light);
  --line:  var(--line-on-light);

  /* ─── Sizing ─── */
  --maxw:       1480px;
  --read-width: var(--maxw);
  --pad-x:      clamp(24px, 4vw, 64px);

  /* ─── Motion ─── */
  /* Two easing curves, both in use: the sharp one on the homepage, the soft
     one on the text pages. */
  --ease-expo:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-expo-soft: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out-q:  cubic-bezier(0.77, 0, 0.175, 1);
}

/* arrow */
/* One drawn arrow for the whole site, as a mask so it takes the weight and
   the colour of its surroundings. The → stays in the HTML and is pushed
   out of the box below, so the old arrow returns if this sheet is missing. */
:root { --arrow-icon: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2024%2024%27%20fill=%27none%27%20stroke=%27black%27%20stroke-width=%273.4%27%20stroke-linecap=%27butt%27%20stroke-linejoin=%27miter%27%3E%3Cpath%20d=%27M4.4%2012H19%27/%3E%3Cpath%20d=%27M13.2%206.2l5.8%205.8-5.8%205.8%27/%3E%3C/svg%3E"); }
.arrow {
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  /* Not font-size: 0, that would zero the 1.2em as well. */
  text-indent: 3em;
  overflow: hidden;
  white-space: nowrap;
  background: currentColor;
  -webkit-mask: var(--arrow-icon) no-repeat center / contain;
  mask: var(--arrow-icon) no-repeat center / contain;
  vertical-align: -0.12em;
  flex-shrink: 0;
  transition: transform 220ms var(--ease-expo);
}

a:hover > .arrow,
button:hover > .arrow { transform: translateX(3px); }

.arrow--inline { margin-left: 0.4em; }
/* Inside a link that is already inline-flex with a gap, that margin doubles. */
.case-page-link .arrow--inline { margin-left: 0; }

@media (prefers-reduced-motion: reduce) {
  .arrow { transition: none; }
}

/* One play button for the whole site. It was defined in home.css and so only
   existed on the pages that load it; the case and service pages had their own.
   Size is set per context, the shape is set once here. */
.case__video-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: clamp(64px, 6vw, 88px);
  height: clamp(64px, 6vw, 88px);
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(var(--cream-rgb),0.92);
  color: var(--ink);
  /* Optical, not geometric: the triangle's mass sits left of its own box,
     so 4px pushed it 1.6px past the middle. Measured, not guessed. */
  padding-left: 1px;
  transition: transform 320ms var(--ease-expo), background 260ms ease;
}

/* Sound button over a film a phone could only start without sound. */
.film-sound {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px 7px 10px;
  border: 0;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.62);
  color: #fff;
  font-family: inherit;
  font-size: 0.72rem;
  letter-spacing: 0.01em;
  cursor: pointer;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.film-sound svg { width: 15px; height: 15px; }

/* Bottom bar of the footer. It lives here and not in the two page stylesheets,
   because build-footer.py owns a block there and its --remove took these rules
   with it. The extra .footer in the selector wins from either sheet. */
.footer .footer__group .dot-in { opacity: 0.4; margin: 0 9px; }
@media (max-width: 680px) {
  /* The dots between the groups stranded at the end and the start of a wrapped
     line. Each group takes its own line here and the spacing separates them. */
  .footer .footer__bottom-left { flex-direction: column; align-items: flex-start; gap: 9px; }
  .footer .footer__bottom-left .dot-sep { display: none; }
  /* The link sat to the right of the stacked lines, at no particular height.
     Below it, left aligned with the rest. */
  .footer .footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }
}