/* ==========================================================================
   AJK Dream House Ltd. — Reset, fonts, elements
   ========================================================================== */

@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('../assets/fonts/plus-jakarta-sans-var.woff2') format('woff2');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../assets/fonts/inter-var.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Geist';
  src: url('../assets/fonts/geist-var.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 24px);
  /* Belt-and-braces with body's overflow-x: hidden below. A translate-based
     reveal (.words, [data-reveal="from-left"/"from-right"]) is an in-flow
     box pushed past its own edge, and Chromium does not reliably contain
     that kind of transform bleed at just one end of the document — it has
     to be constrained on both html and body or a mid-animation frame can
     register as real page-level horizontal scroll.

     `clip` rather than `hidden`: hidden makes the element a scroll container,
     which silently breaks every `position: sticky` descendant (the section
     rail and the build-up graphic). clip contains the same bleed without
     creating one. The `hidden` line stays first as the pre-2022 fallback. */
  overflow-x: hidden;
  overflow-x: clip;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  overflow-x: clip;   /* see the note on html — hidden would break sticky */
}

/* ---- Scroll lock (mobile drawer, lightbox) ------------------------------ */
/* `body { overflow: hidden }` was a no-op here. The browser only propagates
   body's overflow up to the viewport when the *html* element's own overflow is
   `visible`, and html is set to `overflow-x: clip` above — so the declaration
   just made body its own (unscrolled) scroll container while the page carried
   on scrolling behind the open drawer.

   Pinning body instead is the one approach that also holds on iOS Safari,
   where `overflow: hidden` on html alone is not reliably honoured. site.js
   stores the scroll offset in `top` and restores it on unlock. body is not a
   transform/filter/perspective, so it does not become a containing block for
   the fixed header or drawer. */
html.is-locked { overflow: hidden; }
html.is-locked body {
  position: fixed;
  left: 0; right: 0;
  width: 100%;
  overflow: hidden;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--font-display);
  color: var(--text);
  font-weight: 700;
  text-wrap: balance;
}

h1 {
  font-size: var(--fs-hero);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-hero);
}

h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-head);
  letter-spacing: var(--ls-h2);
}

h3 {
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  letter-spacing: -0.01em;
  font-weight: 600;
}

h4 {
  font-family: var(--font-body);
  font-size: var(--fs-h4);
  line-height: 1.45;
  font-weight: 600;
  letter-spacing: -0.005em;
}

p, figure, blockquote, figcaption, dl, dd { margin: 0; }

p { text-wrap: pretty; }

a { color: inherit; text-decoration: none; }

img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; }

ul, ol { margin: 0; padding: 0; list-style: none; }

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

address { font-style: normal; }

strong, b { font-weight: 600; color: var(--text); }

/* ---- Focus -------------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 6px;
}

::selection { background: var(--gold); color: var(--gold-ink); }

/* ---- Skip link ---------------------------------------------------------- */
.skip-link {
  position: fixed;
  left: 50%;
  top: 0;
  z-index: 300;
  transform: translate(-50%, -140%);
  padding: 14px 28px;
  background: var(--gold-grad);
  color: var(--gold-ink);
  font-weight: 700;
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  transition: transform var(--dur) var(--ease);
}
.skip-link:focus { transform: translate(-50%, 0); }

/* ---- Layout primitives -------------------------------------------------- */
.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--narrow { max-width: calc(var(--container-narrow) + var(--gutter) * 2); }

.section { position: relative; padding-block: var(--section-y); }
.section--lg { padding-block: var(--section-y-lg); }
.section--alt { background: var(--bg-alt); }
.section--raise { background: var(--bg-raise); }
.section--sunk { background: var(--bg-sunk); }

/* Hairline rule that fades out at both ends */
.rule {
  height: 1px;
  border: 0;
  margin: 0;
  background: linear-gradient(90deg,
    transparent, var(--line-strong) 18%, var(--line-strong) 82%, transparent);
}

/* Utilities */
.break { display: block; }
@media (max-width: 620px) { .break { display: inline; } }

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