/* ============================================================
   lomahabits.com — shared base
   Loads after tokens.css, which supplies every --token used here.

   ============================================================ */

/* Hanken Grotesk, Latin subset, self-hosted. See
   assets/fonts/PROVENANCE.md for the exact cut, and OFL.txt for
   the licence, which SIL OFL requires to travel with the files.
   No Reserved Font Name in the copyright notice, so the subsets
   keep the family name. */
@font-face {
  font-family: 'Hanken Grotesk';
  src: url('/assets/fonts/HankenGrotesk-Regular.latin.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Hanken Grotesk';
  src: url('/assets/fonts/HankenGrotesk-Medium.latin.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Hanken Grotesk';
  src: url('/assets/fonts/HankenGrotesk-SemiBold.latin.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

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

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

body {
  margin: 0;
  font-family: var(--font-family);
  font-weight: var(--weight-regular);
  color: var(--ink-primary);
  background: var(--bg-aurora);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

a {
  color: var(--link);
  text-decoration: none;
}
a:hover { color: var(--link-hover); }
a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid var(--brand-sage);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: rgba(123, 164, 137, 0.35); }

img, svg, video { max-width: 100%; height: auto; display: block; }
input, button, textarea { font: inherit; color: inherit; }
strong, b { font-weight: var(--weight-semibold); }

:root {
  --link: #3F8462;
  --link-hover: #2E6E50;
  --measure: 34rem;          /* the manifesto's reading measure */
  --gutter: clamp(20px, 4vw, 48px);
}

/* ---- Shared furniture ------------------------------------ */

.wordmark {
  font-weight: var(--weight-semibold);
  font-size: 19px;
  letter-spacing: -0.01em;
  color: inherit;
}

.site-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: clamp(18px, 3vw, 32px) var(--gutter);
}

.site-foot {
  border-top: 1px solid var(--ink-hair);
  padding: 36px var(--gutter) 44px;
  font-size: 13.5px;
}
.site-foot__row {
  max-width: 1060px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 18px 36px;
  align-items: baseline;
  justify-content: space-between;
}
.site-foot__links { display: flex; flex-wrap: wrap; gap: 22px; }
.site-foot__note {
  max-width: 1060px;
  margin: 14px auto 0;
  font-size: 12.5px;
  color: var(--ink-muted);
}
.site-foot__made { color: var(--ink-muted); }

/* ---- Long-form prose (privacy, press, manifesto) ---------- */

.prose {
  max-width: var(--measure);
  margin: 0 auto;
  padding: clamp(56px, 10vh, 104px) var(--gutter) clamp(72px, 12vh, 128px);
}
.prose h1 {
  margin: 0 0 8px;
  font-size: clamp(32px, 5vw, 46px);
  line-height: 1.06;
  letter-spacing: -0.025em;
  font-weight: var(--weight-semibold);
  text-wrap: balance;
}
.prose h2 {
  margin: 2.2em 0 0.5em;
  font-size: clamp(20px, 2.6vw, 25px);
  line-height: 1.2;
  letter-spacing: -0.015em;
  font-weight: var(--weight-semibold);
}
.prose p, .prose li {
  font-size: 16.5px;
  line-height: 1.62;
  color: var(--ink-soft);
  text-wrap: pretty;
}
.prose ul { padding-left: 1.15em; }
.prose li { margin: 0.4em 0; }
.prose__standfirst {
  font-size: clamp(17px, 2.2vw, 20px);
  line-height: 1.5;
  color: var(--ink-muted);
  margin: 0 0 2.4em;
}
.prose__updated {
  margin-top: 3em;
  font-size: 13px;
  color: var(--ink-muted);
}

/* ---- Reduced motion --------------------------------------
   The live sky keeps its colour under this query and loses its
   drift. That is handled in sky.js, not here, because the colour
   has to stay correct for the visitor's local hour.
   ---------------------------------------------------------- */

@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;
  }
}