/* Trawa Romero editorial lockup and three-font contract.
   Shared by the end-user editorial shell and reusable institutional surfaces. */
:root {
  --ui: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --serif: "Playfair Display", Georgia, serif;
  --serif-2: "Playfair Display", Georgia, serif;
  --tr-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --end-user-wordmark: var(--serif);
  --type-label-size: clamp(.6875rem, .66rem + .08vw, .75rem);
  --type-label-tracking: .12em;
  --type-control-gap: .5rem;
  --type-control-pad-inline: 1rem;
}

/* The same transparent blended lockup is used by atlas stories and legacy brand shells. */
.brand,.atlas-brand{font-family:var(--ui)}.atlas-brand{position:relative;gap:16px;min-width:0;isolation:isolate}.atlas-brand>img{display:none!important}.atlas-brand::before{content:"TR";display:grid;place-items:center;width:74px;height:74px;flex:0 0 74px;border:1px solid rgba(239,171,193,.9);border-radius:50%;background:radial-gradient(circle,rgba(228,127,164,.08),transparent 68%);box-shadow:inset 0 0 0 4px rgba(228,127,164,.08),0 0 18px rgba(228,127,164,.2);color:#efabc1;font:600 29px/1 var(--serif);letter-spacing:-.16em;padding-right:.14em;text-shadow:0 1px 0 #fff4f7,0 0 12px rgba(228,127,164,.28);filter:drop-shadow(0 0 14px rgba(239,140,175,.34));mix-blend-mode:screen}.atlas-brand strong{font-family:var(--serif-2)!important;color:var(--cream);font-size:25px!important;font-weight:600!important;line-height:.82!important;letter-spacing:.16em!important}
@media(max-width:780px){.atlas-brand{gap:14px}.atlas-brand::before{width:58px;height:58px;flex-basis:58px;font-size:24px}.atlas-brand strong{font-size:23px!important}}

body {
  font-family: var(--ui);
}

.brand {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 16px;
  min-width: 0;
}

.brand > .mono,
.brand > .mark,
.brand > .brand-mark {
  display: block !important;
  width: 74px !important;
  height: 74px !important;
  flex: 0 0 74px !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: radial-gradient(circle,rgba(228,127,164,.08),transparent 68%) !important;
  box-shadow: inset 0 0 0 4px rgba(228,127,164,.08), 0 0 18px rgba(228,127,164,.2) !important;
  color: #efabc1 !important;
  font: 600 29px / 1 var(--serif) !important;
  letter-spacing: -.16em !important;
  padding-right: .14em !important;
  text-shadow: 0 1px 0 #fff4f7, 0 0 12px rgba(228,127,164,.28) !important;
  filter: drop-shadow(0 0 14px rgba(239, 140, 175, .34)) !important;
  mix-blend-mode: screen !important;
  animation: none !important;
}

.brand > .mono::before,
.brand > .mono::after,
.brand > .mark::before,
.brand > .mark::after {
  content: none !important;
  display: none !important;
}

.brand > .brand-mark::before {
  content: "TR";
  display: grid !important;
  place-items: center;
  width: 100%;
  height: 100%;
  border: 1px solid rgba(239,171,193,.9);
  border-radius: 50%;
}

.brand > .brand-mark img { display: none !important; }

.brand > span:last-child {
  min-width: 0;
}

.brand .wordmark {
  display: block;
  color: var(--cream);
  font-family: var(--serif-2) !important;
  font-size: 25px !important;
  font-weight: 600 !important;
  line-height: .82 !important;
  letter-spacing: .16em !important;
}

.brand .est {
  display: block;
  margin-top: 6px;
  color: var(--faint);
  font-family: var(--ui);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .34em;
  white-space: nowrap;
}

.hero h1,
main h1 {
  font-family: var(--serif) !important;
}

@media (max-width: 720px) {
  .brand {
    gap: 14px;
  }

  .brand > .mono,
  .brand > .mark,
  .brand > .brand-mark {
    width: 58px !important;
    height: 58px !important;
    flex-basis: 58px !important;
  }

  .brand > .brand-mark { font-size: 24px !important; }

  .brand .wordmark {
    font-size: 23px !important;
  }

  .brand::after {
    left: 52px;
  }
}

/* Prescription guides place utility links beside the lockup. The shared
   command-bar grid is intended for direct language/menu controls, so keep
   this grouped variant in three calm, non-overlapping mobile rows. */
@media (max-width: 760px) {
  body > header .nav:has(> .nav-tools) {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px;
    min-height: 0;
    padding-top: 14px;
    padding-bottom: 14px;
  }

  body > header .nav:has(> .nav-tools) > .brand {
    align-self: flex-start;
    width: max-content;
    max-width: 100%;
  }

  body > header .nav:has(> .nav-tools) > .journey-links,
  body > header .nav:has(> .nav-tools) > .nav-tools {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: nowrap !important;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    gap: 8px;
    padding: 2px 2px 7px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  body > header .nav:has(> .nav-tools) > .journey-links::-webkit-scrollbar,
  body > header .nav:has(> .nav-tools) > .nav-tools::-webkit-scrollbar {
    display: none;
  }

  body > header .nav:has(> .nav-tools) > .journey-links > a,
  body > header .nav:has(> .nav-tools) > .nav-tools > * {
    flex: 0 0 auto !important;
    min-width: max-content;
    white-space: nowrap;
    scroll-snap-align: start;
  }

  body > header .nav:has(> .nav-tools) > .nav-tools > .btn {
    width: auto !important;
  }
}
/* Shared type normalization for the editorial shell. */
:where(nav a, button, [role="button"], input[type="submit"]) {
  font-family: var(--ui);
  letter-spacing: .08em;
  text-transform: uppercase;
}

:where(.brand .est, .atlas-brand small) {
  font-family: var(--tr-mono);
  font-size: var(--type-label-size);
  line-height: 1.25;
  letter-spacing: var(--type-label-tracking);
  text-transform: uppercase;
}

:where(.hero h1, main h1) {
  font-size: clamp(2.8rem, 7vw, 5rem);
  line-height: 1.02;
}

/* Practical articles consume the same brand hook as the rest of the site.
   The article stylesheet may animate the existing transparent frame image;
   these rules keep the wordmark stable while that hook changes frames. */
.atlas-brand > span {
  display: block;
  min-width: 0;
}

.atlas-brand strong {
  display: block;
  max-width: 15ch;
  overflow-wrap: normal;
}

.atlas-brand small {
  display: block;
  max-width: 28ch;
  overflow-wrap: normal;
}

.atlas-article > .atlas-copy,
.atlas-article > .atlas-aside {
  min-width: 0;
  align-self: start;
}