/* ==========================================================================
   Himalayan Trails — reset, element defaults, layout primitives
   ========================================================================== */

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

/*
 * The `hidden` attribute has to win over any component `display`. The browser's
 * own [hidden] rule carries element-level weight, so a single class that sets
 * display (`.ht-lightbox { display: grid }`) silently beats it — which left a
 * closed, invisible, full-screen overlay sitting on top of the page, swallowing
 * every hover and click. This keeps `hidden` meaning hidden.
 */
[hidden] {
  display: none !important;
}

html {
  -webkit-text-size-adjust: 100%;
  /*
   * Deliberately NOT `scroll-behavior: smooth`. That property applies to every
   * programmatic scroll on the page, including ones that must be instant, and
   * it is silently ignored in some contexts — which made anchor links do
   * nothing at all. Smooth scrolling is owned by modules/scroll.js instead.
   *
   * scroll-padding-top still keeps native hash landings clear of the header.
   */
  scroll-padding-top: calc(var(--ht-header-main-h) + var(--ht-space-6));

  /*
   * `clip`, not `hidden`: hidden on the root turns the element into a scroll
   * container and breaks position:sticky on the header. clip contains stray
   * width — including the off-canvas drawer — with no side effects.
   */
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--ht-surface);
  color: var(--ht-text);
  font-family: var(--ht-font-body);
  font-size: var(--ht-text-md);
  line-height: var(--ht-leading-normal);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* The single global guard against a stray wide child scrolling the page. */
  overflow-x: clip;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd {
  margin: 0;
}

ul, ol {
  margin: 0;
  padding: 0;
}

li {
  list-style: none;
}

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

img {
  height: auto;
  /* Photography carries this design — never let a card stretch a face or a
     ridge line out of proportion. */
  object-fit: cover;
  background-color: var(--ht-stone-200);
}

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

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  cursor: pointer;
}

address {
  font-style: normal;
}

hr {
  border: 0;
  border-top: 1px solid var(--ht-border-soft);
  margin: 0;
}

::selection {
  background: var(--ht-clay-400);
  color: var(--ht-pine-950);
}

/* ---- Focus --------------------------------------------------------------
   Visible for keyboard users on every interactive element, invisible for
   pointer users, per :focus-visible. */
:focus-visible {
  outline: 2px solid var(--ht-focus);
  outline-offset: 3px;
  border-radius: var(--ht-radius-xs);
}

.ht-skip-link {
  position: absolute;
  top: var(--ht-space-2);
  left: var(--ht-space-2);
  z-index: var(--ht-z-skip);
  padding: var(--ht-space-3) var(--ht-space-5);
  background: var(--ht-pine-900);
  color: var(--ht-text-inverse);
  border-radius: var(--ht-radius-md);
  font-size: var(--ht-text-sm);
  font-weight: 600;
  transform: translateY(-160%);
  transition: transform var(--ht-duration-fast) var(--ht-ease);
}

.ht-skip-link:focus-visible {
  transform: translateY(0);
}

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

.ht-shell {
  width: 100%;
  max-width: var(--ht-shell);
  margin-inline: auto;
  padding-inline: var(--ht-gutter);
}

.ht-shell--wide {
  max-width: var(--ht-shell-wide);
}

.ht-shell--narrow {
  max-width: var(--ht-shell-narrow);
}

.ht-section {
  padding-block: var(--ht-section-y);
}

.ht-section--tight {
  padding-block: var(--ht-section-y-tight);
}

.ht-section--alt {
  background: var(--ht-surface-alt);
}

.ht-section--dark {
  background: var(--ht-surface-dark);
  color: var(--ht-text-inverse);
}

.ht-section--dark .ht-section-heading,
.ht-section--dark .ht-eyebrow {
  color: inherit;
}

.ht-section--dark .ht-section-intro {
  color: var(--ht-text-inverse-muted);
}

/* ---- Typography helpers -------------------------------------------------- */

.ht-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--ht-space-2);
  margin: 0 0 var(--ht-space-3);
  font-size: var(--ht-text-xs);
  font-weight: 600;
  letter-spacing: var(--ht-tracking-caps);
  text-transform: uppercase;
  color: var(--ht-accent);
}

.ht-section--dark .ht-eyebrow {
  color: var(--ht-clay-400);
}

.ht-eyebrow::before {
  content: "";
  width: 1.75rem;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}

.ht-section-heading {
  font-family: var(--ht-font-display);
  font-size: var(--ht-display-2);
  font-weight: 500;
  line-height: var(--ht-leading-snug);
  letter-spacing: var(--ht-tracking-tight);
  text-wrap: balance;
}

.ht-section-heading--sm {
  font-size: var(--ht-display-3);
}

.ht-section-intro {
  margin-top: var(--ht-space-4);
  max-width: 46ch;
  color: var(--ht-text-soft);
  font-size: var(--ht-text-lg);
  line-height: var(--ht-leading-relaxed);
  text-wrap: pretty;
}

/* Heading block with an optional action pinned to the right on wide screens. */
.ht-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--ht-space-6);
  margin-bottom: var(--ht-space-12);
}

.ht-section-head__text {
  min-width: 0;
  flex: 1 1 28rem;
}

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

/* ---- Icon sizing utilities -----------------------------------------------
   Icons inherit their size from context by default; these cover the handful of
   places that need a specific size, so no size is written inline in markup. */

.ht-i-sm { width: 1rem; height: 1rem; }
.ht-i-md { width: 1.125rem; height: 1.125rem; }
.ht-i-lg { width: 1.375rem; height: 1.375rem; }
.ht-i-faded { opacity: 0.4; }