/* ── Base ─────────────────────────────────────────────────────────────────
   Element defaults only. Component styling lives with the components. */
body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-body);
  font: var(--body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
::selection { background: var(--selection-bg); }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  color: var(--text-heading);
  margin: 0;
  text-wrap: pretty;
}
p { margin: 0; text-wrap: pretty; }
a { color: var(--text-accent); text-decoration: none; transition: color var(--dur-base) var(--ease-out); }
a:hover { color: var(--green-700); }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
*, *::before, *::after { box-sizing: border-box; }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* The oval photo mask used for portrait feature images, from the source site. */
.wh-oval-mask {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3E%3Cellipse cx='50%25' cy='50%25' rx='50%25' ry='50%25' fill='black'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3E%3Cellipse cx='50%25' cy='50%25' rx='50%25' ry='50%25' fill='black'/%3E%3C/svg%3E");
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
}
@keyframes wh-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.wh-shimmer {
  background: linear-gradient(100deg, var(--cream-200) 30%, var(--cream-100) 50%, var(--cream-200) 70%);
  background-size: 200% 100%;
  animation: wh-shimmer 1.4s var(--ease-in-out) infinite;
}
@keyframes wh-rise { from { opacity: 0; transform: translateY(var(--reveal-y)); } to { opacity: 1; transform: none; } }