/* Base layer: reset + page defaults. Layout comes from layout.css (generated). */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body.hc-body {
  margin: 0;
  padding: 0;
  background: var(--cream);
  color: var(--body);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, video, iframe { border-style: none; }
img { height: auto; border: 0; }
a { color: inherit; text-decoration: none; }
p, h1, h2, h3, h4, h5, h6, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
table { border-collapse: collapse; border-spacing: 0; }
em, i, cite, dfn, var { font-style: normal; }
strong, b { font-weight: inherit; }
summary { cursor: pointer; }
summary::-webkit-details-marker { display: none; }

.hc-main { position: relative; }

/* nothing on this page is meant to scroll sideways: clip stray overflow at the page
   wrapper so a single wide child can never widen the mobile layout viewport */
#hc-page { overflow-x: clip; }

/* The fixed header bar spans the viewport. Pin it to the viewport width: `width:100%`
   on a fixed element resolves against an initial containing block that grows when the
   bar's own content overflows, which used to widen the whole layout viewport on phones. */
body .hc-section--header-bar { left: 0; right: 0; width: auto; max-width: 100vw; }

/* anchor targets must clear the fixed header */
[id] { scroll-margin-top: 150px; }

/* screen-reader only, mirrors the reference's utility class */
.hc-sr {
  position: absolute !important;
  width: 1px; height: 1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap;
}

/* simple content pages (404, privacy, etc.) */
.hc-plain { max-width: 820px; margin: 0 auto; padding: 160px 24px 90px; }
.hc-plain__title { font-family: var(--serif); font-size: 56px; line-height: 1.1; margin-bottom: 20px; }
.hc-plain__body { font-family: var(--sans); font-size: 16px; line-height: 1.7; }
.hc-plain__body h1 { margin: 0 0 20px; }
.hc-plain__body h2 { margin: 40px 0 12px; }
.hc-plain__body h3 { margin: 32px 0 10px; }
.hc-plain__body p { margin: 0 0 16px; }
.hc-plain__body ul, .hc-plain__body ol { margin: 0 0 16px; padding-left: 22px; }
.hc-plain__body ul { list-style: disc; }
.hc-plain__body ol { list-style: decimal; }
.hc-plain__body li { margin-bottom: 8px; }
.hc-plain__body a { color: var(--gold); text-decoration: underline; }
.hc-plain__link { color: var(--gold); text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* plain page: keep title rhythm above later page-hero rules */
.hc-plain__body .page-hero h1 { margin: 0 0 20px; }
.hc-plain__body .page-hero p { margin: 0 0 16px; }

/* keep full-width page layouts inside the plain (hc-plain) wrapper */
.hc-plain__body .container { width: 100%; max-width: 100%; margin: 0; padding-left: 0; padding-right: 0; }
.hc-plain__body .content-grid { display: flex; flex-direction: column-reverse; gap: 24px; padding: 0; }
.hc-plain__body aside { margin: 0; }
.hc-plain__body .page-hero { padding: 0 0 20px; }

/* typography signature (plain pages) */
.hc-plain__title, .page-hero h1, .page-hero h2 {
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.12;
}
