/* ============================================================
   BASE — reset, page ground, shared atoms, reveal utility
   ============================================================ */

/* Cross-document view transitions: navigating between pages cross-fades
   instead of flashing white. Chrome and Edge honour it; everywhere else
   simply navigates as normal, so there is nothing to fall back to. */
@view-transition{ navigation: auto; }

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

html{ background: var(--bone); }

body{
  margin: 0;
  background: var(--bone);
  color: var(--on-light);
  font-family: var(--ui);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg{ display: block; max-width: 100%; }
a{ color: inherit; text-decoration: none; }

button{
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

:focus-visible{
  outline: 2px solid var(--clay-soft);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection{ background: var(--clay); color: var(--bone-hi); }

/* — atoms ————————————————————————————————————— */

.label{
  font-family: var(--ui);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: .19em;
  text-transform: uppercase;
}

.ar{ font-family: var(--ar); letter-spacing: 0; }

/* — scroll reveal ————————————————————————————— */

[data-reveal]{
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity .9s var(--ease-out),
    transform .9s var(--ease-out);
  transition-delay: var(--d, 0ms);
}
[data-reveal].is-in{ opacity: 1; transform: none; }

/* — shared keyframes ————————————————————————— */

@keyframes fade{ to{ opacity: 1; } }
@keyframes fade-up{
  from{ opacity: 0; transform: translateY(16px); }
  to{ opacity: 1; transform: none; }
}
@keyframes spin{ to{ transform: rotate(360deg); } }

/* — accessibility ————————————————————————————— */

/* — page transition choreography — */

::view-transition-old(root){
  animation: vt-out .26s var(--ease) both;
}
::view-transition-new(root){
  animation: vt-in .42s var(--ease-out) both;
}
@keyframes vt-out{
  to{ opacity: 0; }
}
@keyframes vt-in{
  from{ opacity: 0; transform: translateY(8px); }
  to{ opacity: 1; transform: none; }
}

/* The slab and the footer are the same object on every page, so let them
   persist across the navigation instead of cross-fading with the content. */
.slab{ view-transition-name: slab; }
.foot{ view-transition-name: foot; }

@media (prefers-reduced-motion: reduce){
  ::view-transition-old(root),
  ::view-transition-new(root){ animation: none; }

  *, *::before, *::after{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal]{ opacity: 1; transform: none; }
}