/* =========================================================================
   global.css — Reset, base typography, layout primitives
   The Beekeeper House
   ========================================================================= */

/* ---------- Reset ---------- */

.bk-w.bk-scope.bk-scope *,
.bk-w.bk-scope.bk-scope *::before,
.bk-w.bk-scope.bk-scope *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

.bk-w,
.bk-w.bk-scope.bk-scope h1,
.bk-w.bk-scope.bk-scope h2,
.bk-w.bk-scope.bk-scope h3,
.bk-w.bk-scope.bk-scope h4,
.bk-w.bk-scope.bk-scope h5,
.bk-w.bk-scope.bk-scope h6,
.bk-w.bk-scope.bk-scope p,
.bk-w.bk-scope.bk-scope figure,
.bk-w.bk-scope.bk-scope blockquote,
.bk-w.bk-scope.bk-scope dl,
.bk-w.bk-scope.bk-scope dd,
.bk-w.bk-scope.bk-scope ul,
.bk-w.bk-scope.bk-scope ol {
  margin: 0;
}

.bk-w.bk-scope.bk-scope ul[class],
.bk-w.bk-scope.bk-scope ol[class] {
  padding: 0;
  list-style: none;
}

.bk-w.bk-scope.bk-scope img,
.bk-w.bk-scope.bk-scope picture,
.bk-w.bk-scope.bk-scope svg,
.bk-w.bk-scope.bk-scope video {
  display: block;
  max-width: 100%;
}

.bk-w.bk-scope.bk-scope img { height: auto; }

.bk-w.bk-scope.bk-scope input,
.bk-w.bk-scope.bk-scope button,
.bk-w.bk-scope.bk-scope textarea,
.bk-w.bk-scope.bk-scope select {
  font: inherit;
  color: inherit;
}

/* ---------- Base ---------- */

.bk-w {
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: var(--leading-body);
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- Headings ---------- */

.bk-w.bk-scope.bk-scope h1, .bk-w.bk-scope.bk-scope h2, .bk-w.bk-scope.bk-scope h3 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: var(--leading-display);
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.bk-w.bk-scope.bk-scope h4, .bk-w.bk-scope.bk-scope h5, .bk-w.bk-scope.bk-scope h6 {
  font-family: var(--font-body);
  font-weight: 700;
  line-height: var(--leading-tight);
}

.bk-w.bk-scope.bk-scope h1 { font-size: var(--fs-h1); }
.bk-w.bk-scope.bk-scope h2 { font-size: var(--fs-h2); }
.bk-w.bk-scope.bk-scope h3 { font-size: var(--fs-h3); }
.bk-w.bk-scope.bk-scope h4 { font-size: var(--fs-h4); }
.bk-w.bk-scope.bk-scope h5 { font-size: var(--fs-h5); }
.bk-w.bk-scope.bk-scope h6 { font-size: var(--fs-h6); }

/* ---------- Text ---------- */

.bk-w.bk-scope.bk-scope p { text-wrap: pretty; }

.bk-w.bk-scope.bk-scope p + p { margin-top: var(--space-4); }

/* Headings inside running copy. The reset above zeroes every heading
   margin, which is right for components — .sec-head, .stat__name,
   .award__title and the rest all set their own spacing — but wrong for a
   bare <h3> dropped between paragraphs, which is how the imported pages
   write a subheading. Those landed flush against the copy above and below.

   Scoped to headings with no class, so only that bare prose case is
   caught and no component is touched. More space above than below: the
   heading has to read as belonging to the text it introduces, not
   floating equidistant between two blocks. */
.bk-w.bk-scope.bk-scope :is(p, ul, ol, blockquote) + :is(h2, h3, h4):not([class]) {
  margin-top: var(--space-6);
}

.bk-w.bk-scope.bk-scope :is(h2, h3, h4):not([class]) + :is(p, ul, ol, blockquote) {
  margin-top: var(--space-3);
}

.bk-w.bk-scope.bk-scope a {
  color: var(--text-link);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}

.bk-w.bk-scope.bk-scope a:hover { text-decoration-thickness: 2px; }

.bk-w.bk-scope.bk-scope strong { font-weight: 700; }

/* The header is sticky, so anchored headings must clear it. */
.bk-w.bk-scope.bk-scope :target { scroll-margin-top: var(--space-8); }

/* ---------- Focus ---------- */

.bk-w.bk-scope.bk-scope :focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* On dark grounds the blue ring loses contrast, so switch to cream. */
.bk-w.bk-scope.bk-scope .is-inverse :focus-visible {
  outline-color: var(--color-beeswax-cream);
}

/* ---------- Skip link ---------- */

.bk-w.bk-scope.bk-scope .skip-link {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: 200;
  padding: var(--space-3) var(--space-4);
  background-color: var(--color-deep-water);
  color: var(--color-beeswax-cream);
  font-size: var(--fs-small);
  font-weight: 700;
  text-decoration: none;
  border-radius: var(--radius-md);
  transform: translateY(calc(-100% - var(--space-4)));
  transition: transform var(--dur-calm) var(--ease-calm);
}

.bk-w.bk-scope.bk-scope .skip-link:focus-visible { transform: translateY(0); }

/* ---------- Layout primitives ---------- */

.bk-w.bk-scope.bk-scope .container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--grid-margin);
}

/* Editorial copy never exceeds the 68ch measure, whatever the container. */
.bk-w.bk-scope.bk-scope .measure { max-width: var(--measure); }

.bk-w.bk-scope.bk-scope .section { padding-block: var(--space-6); }

/* Vertical rhythm widens as the page descends. Sections 01–07 are assigned
   ascending tiers so the page feels like it is slowing down.
   Each tier sits one step down the space scale from where it started: the
   progression is intact, but a section no longer carries a third of a
   screen of empty ground above and below its content. */
.bk-w.bk-scope.bk-scope .rhythm-1 { padding-block: var(--space-6); }
.bk-w.bk-scope.bk-scope .rhythm-2 { padding-block: var(--space-6); }
.bk-w.bk-scope.bk-scope .rhythm-3 { padding-block: var(--space-7); }

@media (min-width: 640px) {
  .bk-w.bk-scope.bk-scope .section   { padding-block: var(--space-7); }
  .bk-w.bk-scope.bk-scope .rhythm-1  { padding-block: var(--space-7); }
  .bk-w.bk-scope.bk-scope .rhythm-2  { padding-block: var(--space-7); }
  .bk-w.bk-scope.bk-scope .rhythm-3  { padding-block: var(--space-8); }
}

@media (min-width: 1024px) {
  .bk-w.bk-scope.bk-scope .section   { padding-block: var(--space-8); }
  .bk-w.bk-scope.bk-scope .rhythm-1  { padding-block: var(--space-7); }
  .bk-w.bk-scope.bk-scope .rhythm-2  { padding-block: var(--space-7); }
  .bk-w.bk-scope.bk-scope .rhythm-3  { padding-block: var(--space-8); }
}

.bk-w.bk-scope.bk-scope .section--alt     { background-color: var(--bg-alt); }
.bk-w.bk-scope.bk-scope .section--inverse {
  background-color: var(--bg-inverse);
  color: var(--text-inverse);
}

.bk-w.bk-scope.bk-scope .section--inverse h1,
.bk-w.bk-scope.bk-scope .section--inverse h2,
.bk-w.bk-scope.bk-scope .section--inverse h3 { color: var(--text-inverse); }

.bk-w.bk-scope.bk-scope .section--inverse a { color: var(--color-pale-honey); }

/* ---------- Typographic utilities ----------
   Never use a heading tag for visual sizing. These carry the size instead. */

.bk-w.bk-scope.bk-scope .eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-h6);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: var(--leading-tight);
  color: var(--color-beekeeper-blue);
}

.bk-w.bk-scope.bk-scope .section--inverse .eyebrow { color: var(--color-pale-honey); }

.bk-w.bk-scope.bk-scope .lead {
  font-size: var(--fs-lead);
  line-height: var(--leading-body);
}

.bk-w.bk-scope.bk-scope .text-small   { font-size: var(--fs-small); }
.bk-w.bk-scope.bk-scope .text-caption { font-size: var(--fs-caption); }

/* Section header: eyebrow (Lato, tracked) + H2 (Lora) */
.bk-w.bk-scope.bk-scope .section-header { max-width: var(--measure); }
.bk-w.bk-scope.bk-scope .section-header .eyebrow { margin-bottom: var(--space-3); }
.bk-w.bk-scope.bk-scope .section-header > * + h2 { margin-top: 0; }
.bk-w.bk-scope.bk-scope .section-header p { margin-top: var(--space-4); }

/* Where the lead sits outside the header block, it still needs the gap. */
.bk-w.bk-scope.bk-scope .section-header + .lead { margin-top: var(--space-5); }

/* ---------- Media ---------- */

.bk-w.bk-scope.bk-scope figure { margin: 0; }

.bk-w.bk-scope.bk-scope figcaption {
  margin-top: var(--space-3);
  font-size: var(--fs-caption);
  color: var(--color-beekeeper-blue);
  line-height: var(--leading-tight);
}

.bk-w.bk-scope.bk-scope .section--inverse figcaption { color: var(--color-pale-honey); }

/* <picture> is a wrapper, not a box: it has no intrinsic size, so a
   percentage height on the <img> inside it would resolve to auto. Every
   cover frame in this system therefore sizes the <picture> as well. */
.bk-w.bk-scope.bk-scope picture { display: block; }

/* Images fill their frame; explicit width/height in the HTML prevents CLS. */
.bk-w.bk-scope.bk-scope .media {
  overflow: hidden;
  border-radius: var(--radius-lg);
  background-color: var(--bg-alt);
}

.bk-w.bk-scope.bk-scope .media > picture,
.bk-w.bk-scope.bk-scope .media > picture > img,
.bk-w.bk-scope.bk-scope .media > img {
  width: 100%;
  height: 100%;
}

.bk-w.bk-scope.bk-scope .media img { object-fit: cover; }

.bk-w.bk-scope.bk-scope .ratio-3-2  { aspect-ratio: 3 / 2; }
.bk-w.bk-scope.bk-scope .ratio-4-3  { aspect-ratio: 4 / 3; }
.bk-w.bk-scope.bk-scope .ratio-1-1  { aspect-ratio: 1 / 1; }

/* ---------- Screen-reader only ---------- */

.bk-w.bk-scope.bk-scope .visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- Reduced motion ----------
   Applies without exception, per the tone constraint. */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .bk-w.bk-scope.bk-scope *,
  .bk-w.bk-scope.bk-scope *::before,
  .bk-w.bk-scope.bk-scope *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}