/* ==========================================================================
   Hammam Sables d’Or — Reset + base typography
   ========================================================================== */

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

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--ht-header-h) + 1rem);
}

body {
  min-height: 100vh;
  background: var(--ht-ground);
  color: var(--ht-steam);
  font-family: var(--ht-font-body);
  font-size: var(--ht-t-base);
  font-weight: 300;
  line-height: var(--ht-lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

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

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

/* ---- Headings ------------------------------------------------------------
   Display type is Marcellus at every level. Weight is not available (single
   weight face) so hierarchy is carried by size, tracking and colour only —
   which is the discipline the face was chosen for.
   -------------------------------------------------------------------------- */

h1,
h2,
h3,
h4 {
  font-family: var(--ht-font-display);
  font-weight: 400;
  line-height: var(--ht-lh-tight);
  letter-spacing: var(--ht-track-display);
  text-wrap: balance;
}

h1 {
  font-size: var(--ht-t-2xl);
}
h2 {
  font-size: var(--ht-t-xl);
}
h3 {
  font-size: var(--ht-t-lg);
  line-height: var(--ht-lh-snug);
}
h4 {
  font-size: var(--ht-t-md);
  line-height: var(--ht-lh-snug);
}

p {
  text-wrap: pretty;
}

a {
  color: inherit;
  text-decoration-color: var(--ht-line-brass);
  text-underline-offset: 0.28em;
  text-decoration-thickness: 1px;
  transition: color var(--ht-dur-fast) var(--ht-ease),
    text-decoration-color var(--ht-dur-fast) var(--ht-ease);
}

a:hover {
  color: var(--ht-brass);
  text-decoration-color: var(--ht-brass);
}

ul,
ol {
  padding-inline-start: 1.1em;
}

li::marker {
  color: var(--ht-brass);
}

strong {
  font-weight: 500;
  color: var(--ht-steam);
}

::selection {
  background: var(--ht-brass);
  color: var(--ht-ground-deep);
}

/* ---- Focus ---------------------------------------------------------------
   Brass ring, offset so it never sits on top of the element it marks.
   -------------------------------------------------------------------------- */

:focus-visible {
  outline: 2px solid var(--ht-brass);
  outline-offset: 3px;
  border-radius: var(--ht-radius);
}

:focus:not(:focus-visible) {
  outline: none;
}

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

.ht-skip {
  position: absolute;
  left: var(--ht-gutter);
  top: 0;
  z-index: calc(var(--ht-z-header) + 10);
  padding: 0.75rem 1.25rem;
  background: var(--ht-brass);
  color: var(--ht-ground-deep);
  font-size: var(--ht-t-sm);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-decoration: none;
  transform: translateY(-120%);
  transition: transform var(--ht-dur-fast) var(--ht-ease);
}

.ht-skip:focus {
  transform: translateY(0);
  color: var(--ht-ground-deep);
}

/* ---- Shared text utilities ------------------------------------------------ */

.ht-eyebrow {
  font-family: var(--ht-font-body);
  font-size: var(--ht-t-xs);
  font-weight: 500;
  letter-spacing: var(--ht-track-eyebrow);
  text-transform: uppercase;
  color: var(--ht-brass);
  line-height: 1.4;
}

.ht-lead {
  font-size: var(--ht-t-md);
  color: var(--ht-muted);
  max-width: var(--ht-measure);
  line-height: 1.68;
}

.ht-quote {
  font-family: var(--ht-font-quote);
  font-style: italic;
  font-weight: 300;
  font-size: var(--ht-t-xl);
  line-height: 1.34;
  letter-spacing: 0.005em;
  color: var(--ht-steam);
  text-wrap: balance;
}

.ht-muted {
  color: var(--ht-muted);
}

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

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

/* Visually hidden but available to assistive tech. */
.ht-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}