/* ==========================================================================
   Portfolio Moguls — Base
   Reset, typography, layout primitives.
   MOBILE-FIRST (LESSON-009): base styles target 375px; min-width breakpoints
   at 768 / 1024 / 1280 progressively enhance. No max-width queries.
   ========================================================================== */

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

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

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--pm-font-ui);
  color: var(--pm-text);
  background: var(--pm-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/*
 * Links on light ground are navy, not the action colour: #26D2FF measures
 * 1.8:1 on white and cannot be read as body text. Navy on white is the same
 * colour as the surrounding type, so the underline is doing the work colour
 * used to do — it is the affordance, not decoration. Component links
 * (buttons, cards, nav, chips) opt out below; what stays underlined is links
 * inside running copy, which is where the affordance matters.
 */
a {
  color: var(--pm-link);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}

a:hover,
a:focus-visible { color: var(--pm-link-hover); }

/* Anything that is a control rather than a link in a sentence. */
.pm-skip-link,
.pm-wordmark,
.pm-nav__link,
.pm-mobile-nav__link,
.pm-btn,
.pm-card,
.pm-casecard,
.pm-yieldcard,
.pm-hood,
.pm-corridor,
.pm-prevent,
.pm-recordcard,
.pm-router__tile,
.pm-social,
.pm-actionbar__item,
.pm-clip,
.pm-chip,
.pm-link-arrow,
.pm-also__link,
.pm-vid,
.pm-gallery__video,
.pm-nrbhero__link,
.pm-sellcta__button,
.pm-feecard__link,
.pm-breadcrumb a,
.pm-footer__links a,
.pm-footer__legal a,
.pm-buygrid .page-numbers a { text-decoration: none; }

::selection {
  background: var(--pm-navy);
  color: var(--pm-white);
}

img,
svg,
video {
  max-width: 100%;
  height: auto;
  display: block;
}

button {
  font-family: inherit;
  cursor: pointer;
}

/* Visible focus for keyboard users — the design ships none, so this is added.
   Uses --pm-focus rather than --pm-action: the action cyan measures 1.8:1
   against white, which is a ring you cannot see. --pm-focus is 8.8:1. */
:focus-visible {
  outline: 2px solid var(--pm-focus);
  outline-offset: 2px;
}

/*
 * On navy ground the royal-blue ring is ~1.3:1 — invisible. Found in review:
 * --pm-focus-on-navy was defined for exactly this and never wired up, so a
 * keyboard user tabbing the header, footer or any navy band had no visible
 * focus at all. The action cyan reads at 7.9:1 there.
 */
.pm-header :focus-visible,
.pm-mobile-nav :focus-visible,
.pm-footer :focus-visible,
.pm-hero :focus-visible,
.pm-pagehead :focus-visible,
.pm-section--navy :focus-visible,
.pm-mandate__panel :focus-visible,
.pm-convband :focus-visible,
.pm-nrbhero :focus-visible,
.pm-yieldcard:focus-visible {
  outline-color: var(--pm-focus-on-navy);
}

/* Screen-reader-only, and the skip link that becomes visible on focus */
.pm-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.pm-skip-link {
  position: absolute;
  top: -100px;
  left: var(--pm-gutter);
  z-index: 100;
  background: var(--pm-white);
  color: var(--pm-navy);
  font: var(--pm-button-sm);
  padding: 12px 18px;
  border-radius: var(--pm-radius);
  box-shadow: var(--pm-shadow-float);
  transition: top 0.15s;
}

.pm-skip-link:focus { top: 12px; }

/* --------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------- */

.pm-wrap {
  width: 100%;
  max-width: var(--pm-maxw);
  margin-inline: auto;
  padding-inline: var(--pm-gutter);
}

.pm-wrap--prose { max-width: var(--pm-maxw-prose); }

/* The page shell. position:relative + z-index:0 creates the stacking context
   the watermark sits behind (see components.css .pm-watermark). */
.pm-shell {
  position: relative;
  z-index: 0;
  min-height: 100vh;
}

.pm-section { padding-block: var(--pm-space-6); }

.pm-section--alt {
  background: var(--pm-surface-alt);
  border-block: 1px solid var(--pm-border-faint);
}

.pm-section--deep {
  background: var(--pm-surface-deep);
  border-block: 1px solid var(--pm-border-faint);
}

.pm-section--navy {
  background: var(--pm-navy);
  color: var(--pm-on-navy);
}

/* --------------------------------------------------------------------------
   Type utilities
   -------------------------------------------------------------------------- */

/* Eyebrows are text, and most sit on white — so they take the legible blue,
   not the action cyan. On navy they take the action colour directly. */
.pm-eyebrow {
  font: var(--pm-eyebrow);
  letter-spacing: var(--pm-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--pm-link-hover);
}

.pm-eyebrow--on-navy { color: var(--pm-on-navy-accent); }

/* Gold is permitted here and on the header rule. Nowhere else. */
.pm-eyebrow--gold { color: var(--pm-gold-on-light); }

.pm-stamp {
  font: var(--pm-stamp-type);
  letter-spacing: var(--pm-stamp-tracking);
  text-transform: uppercase;
  color: var(--pm-stamp);
}

/* Defaults to the darkened gold because the majority of stamps sit on light
   bands, where brand gold fails contrast at this size. The navy contexts below
   put the brand gold back — same list as the focus-ring overrides above, and
   for the same reason: the ground decides which of the pair is legible. */
.pm-stamp--gold { color: var(--pm-gold-on-light); }

.pm-header .pm-stamp--gold,
.pm-footer .pm-stamp--gold,
.pm-hero .pm-stamp--gold,
.pm-pagehead .pm-stamp--gold,
.pm-section--navy .pm-stamp--gold,
.pm-mandate__panel .pm-stamp--gold,
.pm-convband .pm-stamp--gold,
.pm-nrbhero .pm-stamp--gold,
.pm-header .pm-eyebrow--gold,
.pm-footer .pm-eyebrow--gold,
.pm-hero .pm-eyebrow--gold,
.pm-pagehead .pm-eyebrow--gold,
.pm-section--navy .pm-eyebrow--gold,
.pm-mandate__panel .pm-eyebrow--gold,
.pm-convband .pm-eyebrow--gold,
.pm-nrbhero .pm-eyebrow--gold { color: var(--pm-gold); }
.pm-stamp--on-navy { color: var(--pm-on-navy-muted); }

.pm-h1 {
  font: var(--pm-h1);
  color: var(--pm-navy);
  letter-spacing: -0.01em;
  margin: 0;
  text-wrap: pretty;
}

.pm-h2 {
  font: var(--pm-h2);
  color: var(--pm-navy);
  margin: 0;
}

.pm-h3 {
  font: var(--pm-h3);
  color: var(--pm-navy);
  margin: 0;
}

.pm-lead {
  font: var(--pm-body);
  color: var(--pm-text-soft);
  margin: 0;
  text-wrap: pretty;
}

.pm-prose {
  font: var(--pm-body);
  color: var(--pm-text);
  max-width: 62ch;
}

.pm-meta {
  font-family: var(--pm-font-ui);
  font-size: 14px;
  color: var(--pm-muted-cool);
}

.pm-figure {
  font: var(--pm-stat);
  color: var(--pm-navy);
}

/* --------------------------------------------------------------------------
   Breakpoints — progressive enhancement only
   -------------------------------------------------------------------------- */

@media (min-width: 768px) {
  .pm-section { padding-block: var(--pm-space-7); }
  :root { --pm-h1: 600 38px/1.12 var(--pm-font-ui); }
}

@media (min-width: 1024px) {
  .pm-section { padding-block: var(--pm-space-8); }
  :root { --pm-h2: 600 28px/1.2 var(--pm-font-ui); }
}

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

/* --------------------------------------------------------------------------
   Holding pages
   Used by Rent / Manage / Insights until those sections are designed.
   -------------------------------------------------------------------------- */

.pm-stub { padding-block: 52px 72px; }

.pm-stub__h1 {
  font-family: var(--pm-font-ui);
  font-weight: 600;
  font-size: 30px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--pm-navy);
  margin: 10px 0 0;
  text-wrap: pretty;
}

.pm-stub__sub {
  font-family: var(--pm-font-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--pm-text-soft);
  margin: 16px 0 0;
  max-width: 60ch;
  text-wrap: pretty;
}

.pm-stub__body {
  font: var(--pm-body);
  color: var(--pm-text);
  margin: 14px 0 0;
  max-width: 62ch;
}

.pm-stub__cta { margin: 28px 0 0; }

.pm-stub__editor { margin-top: 28px; }

@media (min-width: 900px) {
  .pm-stub { padding-block: 68px 88px; }
  .pm-stub__h1 { font-size: 38px; }
}