/* Hypnos Medical brand — plain CSS. Spec: README.md in the Hypnos brand kit.
   Copy fonts/webfonts/*.woff2 next to this file's fonts/ path (or fix the URLs). */

@font-face { font-family: "Gelasio"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("fonts/Gelasio-Regular.woff2") format("woff2"); }
@font-face { font-family: "Geist"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("fonts/Geist-Regular.woff2") format("woff2"); }
@font-face { font-family: "Geist"; font-weight: 600; font-style: normal; font-display: swap;
  src: url("fonts/Geist-SemiBold.woff2") format("woff2"); }

:root {
  --hm-navy: #0f3557;
  --hm-teal: #1b7a8a;
  --hm-dim: #9babb8;
  --hm-border: #d4dde6;
  --hm-surface: #f4f7fa;
  --hm-text: #1c2e3d;
  --hm-muted: #5b6e82;
  --hm-serif: "Gelasio", Georgia, "Times New Roman", serif;
  --hm-sans: "Geist", Arial, Helvetica, sans-serif;
}

/* ── Horizontal lockup ─────────────────────────────────────────────────────
   <div class="hm-lockup hm-on-dark">  (or hm-on-light)
     <svg class="hm-moon" viewBox="0 0 24 24" aria-hidden="true"><path d="M12.2 0A12 12 0 1 0 23.96 13.29A9.14 9.14 0 0 1 12.2 0Z"/></svg>
     <span class="hm-word"><span class="hm-hypnos">Hypnos</span><span class="hm-medical">Medical</span></span>
     <span class="hm-rule" aria-hidden="true"></span><span class="hm-product">Product</span>   ← omit both for the mark alone
   </div> */
.hm-lockup { --ink: var(--hm-navy); --medical: var(--hm-teal); --rule: var(--hm-border);
  display: inline-flex; align-items: center; white-space: nowrap; }
.hm-lockup.hm-on-dark { --ink: #fff; --medical: var(--hm-dim); --rule: rgba(255, 255, 255, 0.25); }
.hm-lockup .hm-moon { display: block; flex: none; width: 22px; height: 22px; fill: var(--ink); }
.hm-lockup .hm-word { display: flex; flex-direction: column; line-height: 1.05; margin-left: 10px; }
.hm-lockup .hm-hypnos { font-family: var(--hm-serif); font-weight: 400; font-size: 13px; letter-spacing: 0.02em; color: var(--ink); }
.hm-lockup .hm-medical, .hm-centred .hm-medical { font-family: var(--hm-sans); font-weight: 600;
  letter-spacing: 0.18em; margin-right: -0.18em; text-transform: uppercase; color: var(--medical); }
.hm-lockup .hm-medical { font-size: 8px; }
.hm-lockup .hm-rule { display: block; flex: none; width: 1px; height: 26px; margin: 0 10px; background: var(--rule); }
.hm-lockup .hm-product, .hm-centred .hm-product { font-family: var(--hm-sans); font-weight: 600;
  letter-spacing: -0.015em; line-height: 1; color: var(--ink); }
.hm-lockup .hm-product { font-size: 17px; }

/* ── Centred lockup (light backgrounds only) ───────────────────────────────
   <div class="hm-centred">                (add hm-compact for two-thirds size)
     <img class="hm-photo" src="moon-photo-light-160.png" alt="">
     <div class="hm-row"><span class="hm-hypnos">Hypnos</span><span class="hm-medical">Medical</span></div>
     <span class="hm-product">Product</span>      ← omit for the mark alone
   </div> */
.hm-centred { --ink: var(--hm-navy); --medical: var(--hm-teal);
  display: inline-flex; flex-direction: column; align-items: center; text-align: center; }
.hm-centred .hm-photo { display: block; height: 46px; width: auto; margin-bottom: 8px; }
.hm-centred .hm-row { display: flex; align-items: baseline; line-height: 1; }
.hm-centred .hm-hypnos { font-family: var(--hm-serif); font-weight: 400; font-size: 24px; color: var(--ink); }
.hm-centred .hm-medical { font-size: 11px; margin-left: 6px; }
.hm-centred .hm-product { font-size: 16px; margin-top: 4px; }
.hm-centred.hm-compact .hm-photo { height: 31px; margin-bottom: 6px; }
.hm-centred.hm-compact .hm-hypnos { font-size: 16px; }
.hm-centred.hm-compact .hm-medical { font-size: 8px; margin-left: 5px; }
.hm-centred.hm-compact .hm-product { font-size: 11px; margin-top: 3px; }