/* Trawa Romero public type contract. Keep this to two intentional families:
   Hanken for reading and controls, and Playfair for editorial/display.
   License texts live beside these files. */
@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("hanken-grotesk-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("hanken-grotesk-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
  src: url("playfair-display-500-600-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
  src: url("playfair-display-500-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Playfair Display";
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("playfair-display-italic-500-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Playfair Display";
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("playfair-display-italic-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
  --tr-font-body: "Hanken Grotesk", system-ui, sans-serif;
  --tr-font-display: "Playfair Display", Georgia, serif;
  --tr-font-mono: var(--tr-font-body);
  --tr-body-size: clamp(1rem, .97rem + .16vw, 1.08rem);
  --tr-label-size: clamp(.875rem, .84rem + .08vw, .95rem);
  --tr-label-tracking: .1em;

  /* Compatibility aliases keep existing page-local tokens on the same roles. */
  --tr-display-font: var(--tr-font-display);
  --tr-ui-font: var(--tr-font-body);
  --tr-type-serif: var(--tr-font-display);
  --tr-type-sans: var(--tr-font-body);
  --tr-type-mono: var(--tr-font-body);
  --serif: var(--tr-font-display);
  --serif-2: var(--tr-font-display);
  --display: var(--tr-font-display);
  --editorial: var(--tr-font-display);
  --wordmark: var(--tr-font-display);
  --ui: var(--tr-font-body);
  --tr-mono: var(--tr-font-body);
  --trawa-ui: var(--tr-font-body);
  --tracker-ui: var(--tr-font-body);
  --tracker-display: var(--tr-font-display);
  --end-user-ui: var(--tr-font-body);
  --end-user-display: var(--tr-font-display);
  --end-user-wordmark: var(--tr-font-display);
  --article-ui: var(--tr-font-body);
  --article-display: var(--tr-font-display);
  --compare-body: var(--tr-font-body);
  --compare-serif: var(--tr-font-display);
  --compare-brand: var(--tr-font-display);
  --compare-label: var(--tr-font-body);
  --producer-body: var(--tr-font-body);
  --producer-title: var(--tr-font-body);
}

/* Every public surface inherits one readable UI family. Specific role selectors
   below are the only deliberate exceptions, so page-local random overrides do
   not leak into the shared chrome at runtime. */
:where(html, body) { font-family: var(--tr-font-body) !important; }
:where(body) {
  min-width: 320px;
  font-size: var(--tr-body-size) !important;
  line-height: 1.55;
  text-rendering: optimizeLegibility;
}
:where(h1, h2, h3, h4, h5, h6, .section-title, .section-head, .section-heading,
  .hero-title, .hero h1, .atlas-hero h1, .gallery-title, .catalog-strain-name,
  .strain-ficha-head h2, .community-carousel-shell h3, .forum-panel-heading h2,
  .forum-profile > strong, .forum-entry-card strong, .forum-topic-card strong,
  .rx-tool h1, .rx-tool h2, .rx-tool h3, .city-price-heading strong, .city-price-name,
  .catalog-compare-intro h3, .topic-title, .tr-wordmark):not(:where(
  [data-legal-ribbon] *,
  [data-prescription-infographic] *,
  [data-prescription-process] *,
  [data-infographic] *,
  .tr-rx-infographic *,
  .epic-infographic *
)) {
  font-family: var(--tr-font-display) !important;
  font-weight: 600;
  letter-spacing: -.02em;
}
:where(code, pre, kbd, samp) { font-family: var(--tr-font-mono) !important; }
:where(button, input, select, textarea):not(:where(
  [data-legal-ribbon] *,
  [data-prescription-infographic] *,
  [data-prescription-process] *,
  [data-infographic] *,
  .tr-rx-infographic *,
  .epic-infographic *
)) {
  box-sizing: border-box;
  min-height: 44px;
  font-family: inherit;
  line-height: 1.35;
}
:where(label, .kicker, .eyebrow, .meta, .small-note, small, time,
  [data-role="meta"], [data-role="label"]):not(:where(
  [data-legal-ribbon] *,
  [data-prescription-infographic] *,
  [data-prescription-process] *,
  [data-infographic] *,
  .tr-rx-infographic *,
  .epic-infographic *
)) {
  font-family: var(--tr-font-body) !important;
  font-size: max(.875rem, var(--tr-label-size));
}
/* One logo source for all public lockups. The source frames are dark-canvas
   renders; screen blending plus a circular clip removes the square tile while
   preserving the actual main-page TR mark and its frame animation. */
:is(body .brand, body .atlas-brand, body .guide-brand, body .compare-brand,
    body .forum-brand, body .rx-brand, body .ep-brand, body .tr-brand-unified) {
  display: inline-flex !important;
  align-items: center !important;
  gap: 14px !important;
  min-width: 0 !important;
  text-decoration: none !important;
}
:is(body .brand, body .atlas-brand, body .guide-brand, body .compare-brand,
    body .forum-brand, body .rx-brand, body .ep-brand, body .tr-brand-unified)::before,
:is(body .brand, body .atlas-brand, body .guide-brand, body .compare-brand,
    body .forum-brand, body .rx-brand, body .ep-brand, body .tr-brand-unified)::after {
  content: none !important;
  display: none !important;
}
:is(body .brand, body .atlas-brand, body .guide-brand, body .compare-brand,
    body .forum-brand, body .rx-brand, body .ep-brand, body .tr-brand-unified) >
  :is(.mono, .mark, .brand-mark, .guide-monogram, img) {
  display: block !important;
  width: 68px !important;
  height: 68px !important;
  flex: 0 0 68px !important;
  aspect-ratio: 1;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent url("../site/tr-logo-frame-1.webp") center / contain no-repeat !important;
  box-shadow: none !important;
  clip-path: circle(49% at 50% 50%) !important;
  filter: drop-shadow(0 0 12px rgba(223, 126, 158, .34)) !important;
  isolation: isolate;
  mix-blend-mode: screen !important;
  overflow: hidden !important;
}
:is(body .brand, body .atlas-brand, body .guide-brand, body .compare-brand,
    body .forum-brand, body .rx-brand, body .ep-brand, body .tr-brand-unified) >
  :is(.mono, .mark, .brand-mark, .guide-monogram, img)::before,
:is(body .brand, body .atlas-brand, body .guide-brand, body .compare-brand,
    body .forum-brand, body .rx-brand, body .ep-brand, body .tr-brand-unified) >
  :is(.mono, .mark, .brand-mark, .guide-monogram, img)::after {
  content: none !important;
  display: none !important;
}
:is(body .brand, body .atlas-brand, body .guide-brand, body .compare-brand,
    body .forum-brand, body .rx-brand, body .ep-brand, body .tr-brand-unified) >
  :is(.mono, .mark, .brand-mark, .guide-monogram) > img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: 1;
  object-fit: contain !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  clip-path: circle(49% at 50% 50%) !important;
  filter: none !important;
  mix-blend-mode: screen !important;
}
:is(body .brand, body .atlas-brand, body .guide-brand, body .compare-brand,
    body .forum-brand, body .rx-brand, body .ep-brand, body .tr-brand-unified)
  :is(.brand-copy, .brand-text, .wordmark, strong) {
  min-width: 0;
}
:is(body .brand, body .atlas-brand, body .guide-brand, body .compare-brand,
    body .forum-brand, body .rx-brand, body .ep-brand, body .tr-brand-unified)
  :is(.wordmark, strong) {
  display: block !important;
  color: var(--cream, #efe7dc) !important;
  font-family: var(--tr-font-display) !important;
  font-size: clamp(1.08rem, 1.5vw, 1.42rem) !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: .13em !important;
  white-space: nowrap;
}
:is(body .brand, body .atlas-brand, body .guide-brand, body .compare-brand,
    body .forum-brand, body .rx-brand, body .ep-brand, body .tr-brand-unified)
  :is(.est, small) {
  display: block !important;
  margin: 4px 0 0 !important;
  color: var(--faint, #85796c) !important;
  font-family: var(--tr-font-body) !important;
  font-size: .7rem !important;
  font-weight: 600 !important;
  letter-spacing: .2em !important;
  line-height: 1.25 !important;
  white-space: nowrap;
}

/* The compact e-prescription header does not load the logo bootstrap script;
   keep its lockup and links on the same responsive rhythm through CSS alone. */
.ep-nav { min-height: 68px; }
.ep-navlinks, .ep-language { min-width: 0; }
.ep-navlinks a, .ep-language a { min-height: 44px; }

@media (max-width: 720px) {
  :is(body .brand, body .atlas-brand, body .guide-brand, body .compare-brand,
      body .forum-brand, body .rx-brand, body .ep-brand, body .tr-brand-unified) >
    :is(.mono, .mark, .brand-mark, .guide-monogram, img) {
    width: 56px !important;
    height: 56px !important;
    flex-basis: 56px !important;
  }
  :is(body .brand, body .atlas-brand, body .guide-brand, body .compare-brand,
      body .forum-brand, body .rx-brand, body .ep-brand, body .tr-brand-unified)
    :is(.wordmark, strong) {
    font-size: 1.05rem !important;
    letter-spacing: .09em !important;
  }
  :is(body .brand, body .atlas-brand, body .guide-brand, body .compare-brand,
      body .forum-brand, body .rx-brand, body .ep-brand, body .tr-brand-unified)
    :is(.est, small) {
    font-size: .62rem !important;
    letter-spacing: .14em !important;
  }
}