/* Shared defaults, independent of page layout. */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: calc(var(--header-height) + var(--space-4)); }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  font-weight: 400;
  line-height: var(--line-body);
  color: var(--color-text);
  background: var(--color-page);
}
h1, h2, h3, h4, h5, h6 { font-weight: 400; line-height: 1.25; color: var(--color-heading); }
p, ul, ol, dl, figure { margin: 0; }
img, video { max-width: 100%; }
button, input, select, textarea { font: inherit; }
:where(a:any-link) { color: var(--color-link); text-underline-offset: .25em; }
:where(a:hover) { color: var(--color-link-hover); }
:where(a:active) { color: var(--color-link-active); }
button {
  color: var(--color-control-text);
  background: var(--color-control);
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  cursor: pointer;
}
button:not(:where(.watercolour-hero *)) {
  transition: background-color var(--control-duration), color var(--control-duration),
    border-color var(--control-duration), box-shadow var(--control-duration);
}
@media (hover: hover) and (pointer: fine) {
  button:hover:not(:disabled):not([aria-disabled="true"]):not(:where(.watercolour-hero *)) {
    background-color: var(--color-control-hover);
  }
}
button:active:not(:disabled):not([aria-disabled="true"]):not(:where(.watercolour-hero *)) {
  box-shadow: inset 0 0 0 2px currentColor;
}
button:disabled { cursor: not-allowed; opacity: .5; }
a:focus-visible, button:focus-visible, input:focus-visible, [tabindex]:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 4px;
}
.backBtnWrapper { display: flex; align-items: center; gap: var(--space-1); margin-bottom: var(--space-4); }
.backBtnWrapper a { display: inline-block; padding-block: var(--space-2); text-decoration: none; }
.backBtnWrapper :where(a:hover) { text-decoration: underline; }
.backIcon { width: 24px; height: 24px; }
.dark-mode .backIcon { filter: invert(1); }
img.image-reveal { opacity: 1; filter: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* One viewport overlay, outside content stacking and clipping contexts.
   Native arrow/hand cursors stay visible; the hero owns its own cursor rules. */
.site-dot-cursor {
  display: none;
  position: fixed;
  inset: auto;
  left: 0;
  top: 0;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--color-heading);
  opacity: .8;
  pointer-events: none;
  overflow: visible;
  z-index: 2147483647; /* Fallback for browsers without the top-layer API. */
}
.site-dot-cursor::backdrop { background: transparent; pointer-events: none; }
@media (hover: hover) and (pointer: fine) {
  html.has-site-dot-cursor .site-dot-cursor { display: block; }
  .site-dot-cursor.is-clickable { width: 18px; height: 18px; margin: -9px 0 0 -9px; }
}