/* ==========================================================================
   PROOF — Base
   Reset, document defaults, keyframes and global accessibility rules.
   Load order: fonts.css → tokens.css → base.css → components.css
               → layout-kit.css | layout-site.css → pages/<page>.css
   ========================================================================== */

/* ---- Reset ------------------------------------------------------------ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

img,
svg,
video {
  max-width: 100%;
}

button {
  font: inherit;
}

/* ---- Document --------------------------------------------------------- */
body {
  min-height: 100vh;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: var(--body-size);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

a {
  color: var(--accent-text);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:hover {
  color: var(--ink);
}

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

[hidden] {
  display: none !important;
}

/* Visually hidden, still announced by screen readers */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---- Keyframes -------------------------------------------------------- */
/* Hand-drawn stroke (used by .mark, see proof.js → Proof.mark) */
@keyframes proofDraw {
  from { stroke-dashoffset: 1; }
  to   { stroke-dashoffset: 0; }
}

/* Rubber stamp landing */
@keyframes proofStamp {
  0%   { opacity: 0; transform: rotate(-7deg) scale(1.6); }
  60%  { opacity: 1; transform: rotate(-7deg) scale(.94); }
  100% { opacity: 1; transform: rotate(-7deg) scale(1); }
}

/* Bottom bar / toast rising in (element is centred with translateX(-50%)) */
@keyframes proofUp {
  from { opacity: 0; transform: translate(-50%, 16px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

/* ---- Responsive stacking helper ---------------------------------------
   Add data-stack to any grid/flex row that should become a single column
   below 760 px. */
@media (max-width: 760px) {
  [data-stack] {
    display: flex !important;
    flex-direction: column;
    gap: 28px !important;
  }

  [data-stack] > * {
    margin-top: 0 !important;
    min-width: 0 !important;
    width: 100%;
  }
}

/* ---- View transitions ------------------------------------------------- */
::view-transition-group(*) {
  animation-duration: 700ms;
  animation-timing-function: cubic-bezier(.16, 1, .3, 1);
}

/* ---- Reduced motion --------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 1ms !important;
    transition-duration: 1ms !important;
  }

  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}