* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--space-section-md); }
body { margin: 0; color: var(--color-text); background: var(--color-bg); font-family: var(--p-font-family-mono); font-weight: var(--font-body-weight); }
a { color: inherit; }
/* Content that runs to the page edge (the example carousel) never causes a horizontal scroll. */
main { overflow-x: clip; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
img { max-width: 100%; }
[hidden] { display: none !important; }
:focus-visible { outline: calc(var(--p-border-width) * 2) solid var(--color-focus-ring); outline-offset: var(--space-ui-xs); }
::selection { color: var(--color-highlight-text); background: var(--color-highlight); }
.site-skip { position: fixed; inset-block-start: var(--space-ui-md); inset-inline-start: var(--space-ui-md); padding: var(--space-ui-md); background: var(--color-highlight); z-index: 30; transform: translateY(-200%); }
.site-skip:focus { transform: none; }
.site-header, .site-footer { width: min(calc(100% - var(--space-gutter) * 2), 89rem); margin-inline: auto; display: flex; justify-content: space-between; align-items: center; gap: var(--space-section-sm); }
.site-header { position: relative; padding-block: var(--space-stack-md); }
.site-header__brand, .site-footer__brand > a { display: inline-flex; flex-shrink: 0; }
.site-header__brand img, .site-footer__brand img { width: 9.5625rem; height: auto; display: block; }
.site-header__nav { display: flex; gap: var(--space-section-sm); }
.site-header__nav a { text-decoration: none; font-weight: var(--p-font-weight-book); font-size: var(--font-h3-size); }
.site-button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-stack-md); padding: var(--space-ui-lg) var(--space-ui-2xl); border-radius: var(--radius-pill); border: var(--p-border-width) solid var(--color-btn-border); color: var(--color-btn-text); background: var(--color-btn-bg); font-size: var(--p-font-size-h3); font-weight: var(--p-font-weight-book); text-decoration: none; cursor: pointer; transition: background var(--motion-hover-duration) var(--motion-hover-ease); }
.site-button:hover { background: var(--color-btn-bg-hover); }
.site-button img { flex-shrink: 0; }
.site-header__menu { display: none; }
.site-header__mobile { position: absolute; inset-inline: 0; inset-block-start: 100%; background: var(--color-bg-card); border: var(--p-border-width) solid var(--color-border-subtle); border-radius: var(--radius-card); padding: var(--space-section-sm); z-index: 20; }
.site-header__mobile a { display: block; padding-block: var(--space-ui-md); text-decoration: none; }
.site-footer { align-items: flex-start; padding-block: var(--space-section-lg); }
.site-footer p { font-size: var(--font-ui-lg-size); line-height: var(--font-body-line-height); color: var(--color-text-secondary); margin-block: var(--space-stack-md) 0; }
.site-footer__columns { display: flex; flex-wrap: wrap; gap: var(--space-section-md); }
.site-footer__column { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-ui-lg); min-width: 10rem; }
.site-footer__title { margin: 0 0 var(--space-ui-xs); font-family: var(--font-body-family); font-size: var(--font-ui-lg-size); font-weight: var(--font-accent-weight); line-height: var(--font-heading-line-height); }
.site-footer__column a { color: var(--color-text-secondary); font-size: var(--font-ui-lg-size); line-height: var(--font-body-line-height); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; text-underline-offset: var(--space-ui-2xs); }
.site-footer__motion { margin-top: var(--space-stack-md); padding: var(--space-ui-xs) 0; border: 0; background: transparent; color: var(--color-text-secondary); cursor: pointer; text-decoration: underline; }
.site-page { max-width: 60rem; margin: var(--space-section-md) auto var(--space-section-xl); padding: var(--space-section-sm); }
.site-page h1 { font-family: var(--p-font-family-serif); font-size: var(--font-display-size); font-weight: var(--font-heading-weight); line-height: var(--font-heading-line-height); }
.site-page h2 { font-family: var(--p-font-family-serif); font-size: var(--font-h2-size); font-weight: var(--font-heading-weight); margin-block-start: var(--space-section-md); }
.site-page p, .site-page li { font-size: var(--font-h4-size); line-height: var(--font-body-line-height); }
.site-page__actions { display: flex; flex-wrap: wrap; gap: var(--space-stack-md); margin-block: var(--space-section-sm); }
@media (max-width: 1150px) { .site-header__nav a { font-size: var(--font-ui-lg-size); } .site-header__cta { font-size: var(--p-font-size-ui-lg); } .site-header__nav { gap: var(--space-stack-md); } .site-footer { flex-direction: column; } }
@media (max-width: 760px) {
  .site-header, .site-footer { width: calc(100% - var(--space-gutter) * 2); }
  .site-header__brand img, .site-footer__brand img { width: 7rem; }
  .site-header__nav, .site-header__cta { display: none; }
  .site-header__menu { display: flex; flex-direction: column; justify-content: center; gap: var(--space-ui-sm); width: var(--size-control-md); height: var(--size-control-md); border: var(--p-border-width) solid var(--color-border-subtle); border-radius: var(--radius-pill); background: var(--color-bg); padding-inline: var(--space-ui-md); cursor: pointer; }
  .site-header__menu span { height: var(--p-border-width); width: 100%; background: var(--color-text); }
  .site-footer__columns { flex-direction: column; gap: var(--space-section-sm); }
  .site-footer p { max-width: 32ch; }
  .site-page { margin-block: var(--space-stack-md); padding: var(--space-section-sm); }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.site-button__arrow { transform: rotate(90deg) scaleY(-1); }