/* ============================================================
   braḥ — shared stylesheet
   ------------------------------------------------------------
   DESIGN TOKENS
   Everything below the token block references these values.
   To change the feel of the whole site, change them here.
   ============================================================ */

:root {
  /* ---- Colour -------------------------------------------------
     Only two colours exist in this system. Hierarchy is created
     with opacity of the ink colour, never with new hues.        */
  --paper:        #F9F5F0;
  --ink:          #2C2420;

  --ink-100:      rgba(44, 36, 32, 1);      /* wordmark, headings */
  --ink-70:       rgba(44, 36, 32, 0.70);   /* body text          */
  --ink-45:       rgba(44, 36, 32, 0.45);   /* nav, secondary     */
  --ink-25:       rgba(44, 36, 32, 0.25);   /* hairlines, rules   */
  --dot-size:     14px;                     /* solid, present     */
  --ink-12:       rgba(44, 36, 32, 0.12);   /* hairlines          */

  /* ---- Type ---------------------------------------------------
     One family throughout, matching the app. Personality comes
     from weight, size and tracking — not from a second face.    */
  --font:         'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --size-wordmark: clamp(2.5rem, 8vw, 4.5rem); /* present, not dominating     */
  --weight-wordmark: 400;                      /* regular — restraint          */
  --size-title:    1.5rem;
  --size-body:     0.9375rem;
  --size-small:    0.8125rem;
  --size-nav:      0.6875rem;

  --track-nav:     0.16em;    /* wide tracking on small caps     */
  --track-tight:   -0.01em;
  --leading-body:  1.75;      /* generous — space is the luxury  */

  /* ---- Space --------------------------------------------------
     A single rhythm. Multiples of a 4px base.                   */
  --space-xs:     0.5rem;
  --space-sm:     1rem;
  --space-md:     2rem;
  --space-lg:     4rem;
  --space-xl:     7rem;
  --space-page:   2rem;       /* page edge padding              */

  --measure:      34rem;      /* max reading width              */

  /* ---- Motion -------------------------------------------------
     Slow and quiet. Nothing bounces.                            */
  --ease:         cubic-bezier(0.4, 0, 0.2, 1);
  --dur-slow:     700ms;
  --dur-med:      420ms;
  --dur-fast:     220ms;
}

/* ============================================================
   RESET
   ============================================================ */

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

html, body {
  margin: 0;
  padding: 0;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  background: var(--paper);
  color: var(--ink-70);
  font-family: var(--font);
  font-size: var(--size-body);
  line-height: var(--leading-body);
  font-weight: 400;
  min-height: 100vh;
  min-height: 100dvh;
}

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

/* ============================================================
   DOT NAVIGATION  — the signature element
   ------------------------------------------------------------
   Two dots sit in the upper corners. They are the only marks on
   the landing page besides the wordmark. Links reveal on hover
   (pointer devices) and on tap (touch devices — handled in JS by
   toggling .is-open, since touchscreens have no hover state and
   the crisis protocol must be reachable on every device).
   ============================================================ */

.dot-nav {
  position: fixed;
  top: var(--space-page);
  z-index: 10;
}

.dot-nav--left  { left:  var(--space-page); }
.dot-nav--right { right: var(--space-page); }

/* The dot itself — a button for keyboard and screen-reader access */
.dot {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  padding: var(--space-xs);   /* enlarges the tap target */
  margin: calc(var(--space-xs) * -1);
  cursor: pointer;
  display: block;
  line-height: 0;
}

.dot::after {
  content: '';
  display: block;
  width: var(--dot-size);
  height: var(--dot-size);
  border-radius: 50%;
  background: var(--ink-100);      /* fully opaque, full-strength ink */
  transition: transform var(--dur-med) var(--ease);
}

.dot:hover::after,
.dot:focus-visible::after,
.dot-nav.is-open .dot::after {
  transform: scale(1.15);
}

.dot:focus-visible {
  outline: 1px solid var(--ink-45);
  outline-offset: 6px;
  border-radius: 50%;
}

/* The revealed links */
.dot-links {
  position: absolute;
  top: 50%;
  display: flex;
  flex-direction: row;          /* side by side, not stacked */
  align-items: center;
  gap: var(--space-md);
  transform: translateY(-50%);

  opacity: 0;
  visibility: hidden;
  transition: opacity    var(--dur-med) var(--ease),
              visibility 0s linear var(--dur-med);
}

.dot-nav--left  .dot-links { left:  calc(var(--dot-size) + var(--space-md)); }
.dot-nav--right .dot-links { right: calc(var(--dot-size) + var(--space-md)); flex-direction: row-reverse; }

.dot-nav:hover .dot-links,
.dot-nav:focus-within .dot-links,
.dot-nav.is-open .dot-links {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--dur-slow) var(--ease),
              visibility 0s;
}

.dot-links a {
  font-size: var(--size-nav);
  letter-spacing: var(--track-nav);
  text-transform: uppercase;
  color: var(--ink-45);
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease);
}

.dot-links a:hover,
.dot-links a:focus-visible {
  color: var(--ink-100);
}

.dot-links a:focus-visible {
  outline: 1px solid var(--ink-45);
  outline-offset: 4px;
}

/* ============================================================
   LANDING
   ------------------------------------------------------------
   The wordmark, centred, and nothing else. The restraint is the
   design: with no product photography, showing almost nothing is
   the more confident move than filling the space.
   ============================================================ */

.landing {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: var(--space-page);
}

.wordmark {
  font-size: var(--size-wordmark);
  font-weight: var(--weight-wordmark);
  letter-spacing: -0.015em;
  color: var(--ink-100);
  line-height: 1;
  margin: 0;

  /* Fades in once, slowly, on load. */
  animation: settle var(--dur-slow) var(--ease) both;
  animation-delay: 120ms;
}

@keyframes settle {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0);   }
}

/* ============================================================
   DOCUMENT PAGES
   ------------------------------------------------------------
   Same system, more density. Legal and safety text has to be
   genuinely readable, so these pages trade drama for clarity.
   ============================================================ */

.doc {
  max-width: var(--measure);
  margin: 0 auto;
  padding: var(--space-xl) var(--space-page) var(--space-lg);
}

.doc-back {
  display: inline-block;
  font-size: var(--size-nav);
  letter-spacing: var(--track-nav);
  text-transform: uppercase;
  color: var(--ink-45);
  margin-bottom: var(--space-lg);
  transition: color var(--dur-fast) var(--ease);
}

.doc-back:hover,
.doc-back:focus-visible { color: var(--ink-100); }

.doc h1 {
  font-size: var(--size-title);
  font-weight: 400;
  letter-spacing: var(--track-tight);
  color: var(--ink-100);
  margin: 0 0 var(--space-xs);
  line-height: 1.3;
}

.doc .doc-meta {
  font-size: var(--size-small);
  color: var(--ink-45);
  margin: 0 0 var(--space-lg);
}

.doc h2 {
  font-size: var(--size-body);
  font-weight: 500;
  color: var(--ink-100);
  letter-spacing: 0;
  margin: var(--space-md) 0 var(--space-xs);
  line-height: 1.4;
}

.doc p {
  margin: 0 0 var(--space-sm);
}

.doc ul {
  margin: 0 0 var(--space-sm);
  padding-left: 1.1rem;
}

.doc li {
  margin-bottom: var(--space-xs);
}

.doc strong {
  font-weight: 500;
  color: var(--ink-100);
}

.doc a:not(.doc-back) {
  color: var(--ink-100);
  border-bottom: 1px solid var(--ink-25);
  padding-bottom: 1px;
  transition: border-color var(--dur-fast) var(--ease);
}

.doc a:not(.doc-back):hover {
  border-bottom-color: var(--ink-100);
}

.doc hr {
  border: 0;
  border-top: 1px solid var(--ink-12);
  margin: var(--space-lg) 0;
}

/* A quiet block for the crisis resources — set apart by space and
   a hairline, not by colour, since the system has only one ink. */
.resource {
  border-top: 1px solid var(--ink-12);
  border-bottom: 1px solid var(--ink-12);
  padding: var(--space-md) 0;
  margin: var(--space-md) 0;
}

.resource p { margin-bottom: var(--space-xs); }
.resource p:last-child { margin-bottom: 0; }

.doc-foot {
  margin-top: var(--space-xl);
  padding-top: var(--space-md);
  border-top: 1px solid var(--ink-12);
  font-size: var(--size-small);
  color: var(--ink-45);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 640px) {
  :root {
    --space-page: 1.5rem;
    --space-xl:   4.5rem;
  }

  .doc { padding-top: var(--space-xl); }
}

/* ============================================================
   ACCESSIBILITY
   ============================================================ */

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