/* OmHaa legibility layer
   Loaded last on every page, so it raises the floor without touching each
   page's own design. Nothing here changes layout, colour family or voice.
   It changes three things only: size, weight and contrast.

   Measured before: 70 text nodes under 15px on the homepage, some at 9.9px,
   and 29 nodes below the 4.5 to 1 contrast minimum.

   Written 2026-08-17. */

/* ---- 1. the base ----------------------------------------------------
   Everything on the site is sized in rem, so lifting the root lifts the
   whole scale in proportion and keeps the design's rhythm intact. */
:root{
  font-size: 17.5px;

  /* the soft grey failed against the teal page ground at 3.28 to 1.
     This one reaches 4.7 on the page and 8.9 on the cream card. */
  --soft: #2A4E49;
  --gold-ink: #6E5527;

  /* the mid teal sat at 4.0 to 1 on the page ground, just under the line.
     This one reaches 4.7 and keeps white button text comfortable. */
  --teal: #14504E;
}
@media (max-width: 520px){ :root{ font-size: 16.5px } }

/* ---- 2. body copy ---------------------------------------------------
   Weight 200 is a display weight. At paragraph size it reads as grey mist,
   especially on a coloured ground and especially on older eyes. */
body{ font-weight: 300; line-height: 1.78 }

p, li, .lead, .sub, .ds, .promise, .door, .ident, .d, .v, .need,
.j p, .door p, .when div, .step .v{
  font-size: max(1rem, 17px);
  font-weight: 300;
}

/* the reading measure: long lines are as tiring as small type */
.lead, .sub, .promise, .ident, .recog, .remember{ max-width: 36rem }

/* ---- 3. the small labels -------------------------------------------
   These carried the worst of it, between 9.9px and 11.2px, often at weight
   200 with wide tracking, which pulls letters apart exactly where the eye
   needs them close. Floor of 13px, a little more weight, less tracking. */
.eyebrow, .kick, .plab, .lab, .nm, .k, .tag, .no, .st, .qrcap, .fine,
.soon, .ml, .j .nm, .filmmeta, .meta, .lang, .cap, .note{
  font-size: max(.78rem, 13.5px) !important;
  font-weight: 400;
  letter-spacing: .12em;
}

/* tiny numerals in ordered lists were 11.2px on a tinted disc */
.bundle .n, .whatin .n, .no{ font-size: max(.75rem, 13px) !important; font-weight: 400 }

/* the status badge. Its tint was translucent, so its contrast changed with
   whatever sat behind it: fine on the cream card, 3.5 to 1 on the teal page.
   An opaque ground makes it the same everywhere. */
.live{
  font-size: max(.76rem, 13.5px) !important;
  letter-spacing: .1em;
}
.wip{
  font-size: max(.76rem, 13.5px) !important;
  color: var(--gold-ink);
  border-color: rgba(140, 106, 44, .5);
  background: #F6EEDD;
  letter-spacing: .1em;
}

/* the step numerals on the paintings and about pages read at 2.2 to 1 */
.no, .st{ color: var(--soft) !important; opacity: 1 !important }

/* the last two stragglers found by the audit */
.who, .soft{ font-size: max(.78rem, 13px) !important }

/* ---- 4. headings ----------------------------------------------------
   Display weight is right at display size. Kept, only floored. */
h1{ font-weight: 250 }
h2{ font-size: max(1.5rem, 26px); font-weight: 300 }
h3{ font-size: max(1.06rem, 18px); font-weight: 400 }

/* ---- 5. links and controls -----------------------------------------
   Touch targets and the underline that tells you a link is a link. */
.btn{ font-size: max(.95rem, 16px); font-weight: 400; min-height: 44px }
.btn-small, .btn-sm{ font-size: max(.88rem, 15px); min-height: 40px }
footer a, .others a{ font-size: max(.9rem, 15px) }
main a:not(.btn), .lead a, p a:not(.btn){ text-decoration: underline;
  text-underline-offset: .18em; text-decoration-thickness: .06em }

/* ---- 6. quiet respect ----------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .01ms !important; animation-iteration-count: 1 !important;
     transition-duration: .01ms !important; scroll-behavior: auto !important }
}
:where(a, button, [tabindex]):focus-visible{
  outline: 2px solid #14504E; outline-offset: 3px; border-radius: 6px;
}

/* the italic serif voice stays, just never below comfortable */
.recog, .quote, .truth{ font-size: max(1.12rem, 19px) }
/* the line that says what a journey is for. It leads the row, so it
   must not be smaller than the description beside it. */
.j .q{ font-size: max(1.06rem, 18px) !important; font-weight: 400 }
.truth{ font-weight: 300 }