/* ==========================================================================
   PolishMaster — shared site chrome (masthead + footer)

   Loaded by every page: the landing page, the legal pages, About and the
   blog. It is the single source of truth for the header and the footer, so
   moving between pages never changes the wordmark size, the bar height or
   the footer. Tokens are scoped to the chrome itself (--c-*) because the
   page stylesheets (home.css, site.css, blog.css) each define their own
   --ink/--line values, and the chrome must render identically on all of them.
   ========================================================================== */

.masthead,
.pm-footer {
  --c-ink:          #F5F6F7;
  --c-body:         #C5CBD2;
  --c-muted:        #9AA2AB;
  --c-faint:        #8B939C;
  --c-orange:       #C86B3C;
  --c-orange-hi:    #E68A50;
  --c-orange-lo:    #9C4F27;
  --c-orange-glow:  rgba(200, 107, 60, .30);
  --c-line:         rgba(255, 255, 255, .09);
  --c-line-2:       rgba(255, 255, 255, .16);
  --c-line-orange:  rgba(200, 107, 60, .34);
  --c-font: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --c-mono: ui-monospace, "SFMono-Regular", "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace;
  --c-ease: cubic-bezier(.22, .61, .36, 1);
  font-family: var(--c-font);
}

.chrome-shell { width: min(1200px, calc(100% - 32px)); margin-inline: auto; }

.masthead a,
.pm-footer a { color: inherit; text-decoration: none; }

/* --------------------------------------------------------------------------
   Masthead
   -------------------------------------------------------------------------- */

.masthead {
  position: sticky;
  top: 0;
  z-index: 120;
  padding-top: env(safe-area-inset-top, 0px);
  border-bottom: 1px solid var(--c-line);
  background: rgba(8, 9, 10, .82);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
}

.masthead::after {
  content: "";
  position: absolute;
  inset: auto 0 -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--c-line-orange) 22%, rgba(200, 107, 60, .12) 60%, transparent);
  pointer-events: none;
}

.masthead-in {
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font: 800 15px/1 var(--c-font);
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.wordmark b { font-weight: 800; color: var(--c-ink); }
.wordmark i { font-style: normal; font-weight: 800; color: var(--c-orange); }

.masthead-nav { display: flex; align-items: center; gap: 4px; }

.masthead-link {
  min-height: 40px;
  display: none;
  align-items: center;
  padding: 0 12px;
  border-radius: 3px;
  color: var(--c-body);
  font: 700 12px/1 var(--c-font);
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: color .16s var(--c-ease), background-color .16s var(--c-ease);
}
.masthead-link:hover { color: var(--c-ink); background: rgba(255, 255, 255, .04); }

/* The phone header stays quiet: the page and (on the landing page) the sticky
   bar carry the CTA, so two orange buttons never compete on a small screen. */
.masthead-cta {
  position: relative;
  display: none;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 10px 16px;
  border: 1px solid transparent;
  border-radius: 3px;
  background: linear-gradient(178deg, var(--c-orange-hi), var(--c-orange) 58%, var(--c-orange-lo));
  color: #0B0B0B;
  font: 800 12px/1.1 var(--c-font);
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .34) inset,
    0 -1px 0 rgba(0, 0, 0, .28) inset,
    0 12px 30px -12px var(--c-orange-glow);
  transition: transform .16s var(--c-ease), box-shadow .18s var(--c-ease);
}
.masthead-cta:hover {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .44) inset,
    0 -1px 0 rgba(0, 0, 0, .28) inset,
    0 18px 40px -14px rgba(200, 107, 60, .55);
}
.masthead-cta:active { transform: translateY(1px) scale(.995); }

.masthead-link:focus-visible,
.masthead-cta:focus-visible,
.wordmark:focus-visible,
.pm-footer a:focus-visible {
  outline: 2px solid var(--c-orange-hi);
  outline-offset: 3px;
  border-radius: 2px;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.pm-footer {
  position: relative;
  overflow: hidden;
  padding-top: 56px;
  border-top: 1px solid var(--c-line);
  background:
    radial-gradient(90% 60% at 50% 100%, rgba(200, 107, 60, .06), transparent 70%),
    #060708;
  color: var(--c-body);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.6;
}

/* Same polished hairline the masthead carries — the page is framed by it. */
.pm-footer::before {
  content: "";
  position: absolute;
  inset: -1px 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--c-line-orange) 22%, rgba(200, 107, 60, .12) 60%, transparent);
  pointer-events: none;
}

.pm-footer p { margin: 0; }

.pm-footer-top {
  display: grid;
  gap: 40px;
  padding-bottom: 44px;
}

.pm-footer-brand .wordmark { font-size: 17px; }

.pm-footer .pm-footer-tagline {
  max-width: 36ch;
  margin-top: 14px;
  color: var(--c-muted);
  font-size: 14.5px;
  line-height: 1.65;
  overflow-wrap: break-word;
}

.pm-footer-social {
  display: flex;
  gap: 10px;
  margin-top: 22px;
}

.pm-footer-social a {
  width: 44px;
  height: 44px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--c-line-2);
  border-radius: 999px;
  color: var(--c-body);
  background: rgba(255, 255, 255, .02);
  transition: color .16s var(--c-ease), border-color .16s var(--c-ease), background-color .16s var(--c-ease);
}
.pm-footer-social a:hover {
  border-color: var(--c-line-orange);
  background: rgba(200, 107, 60, .08);
  color: var(--c-orange-hi);
}
.pm-footer-social svg { width: 18px; height: 18px; display: block; }

.pm-footer-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px 20px;
}

.pm-footer-col { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }

.pm-footer .pm-footer-heading {
  margin: 0 0 8px;
  color: var(--c-muted);
  font: 600 11px/1.2 var(--c-mono);
  letter-spacing: .17em;
  text-transform: uppercase;
  overflow-wrap: normal;
}

/* 44px touch target on phones — the link box grows, the type does not. */
.pm-footer-col a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--c-body);
  font-size: 15px;
  line-height: 1.35;
  transition: color .16s var(--c-ease);
}
.pm-footer-col a:hover { color: var(--c-ink); }

.pm-footer-col a svg {
  width: 10px;
  height: 10px;
  flex: none;
  color: var(--c-faint);
  transition: color .16s var(--c-ease), transform .16s var(--c-ease);
}
.pm-footer-col a:hover svg { color: var(--c-orange-hi); transform: translate(1px, -1px); }

.pm-footer-col a.pm-footer-accent { color: var(--c-orange-hi); font-weight: 700; }
.pm-footer-col a.pm-footer-accent:hover { color: #F2A06D; }
.pm-footer-col a.pm-footer-accent svg { color: currentColor; }
.pm-footer-col a.pm-footer-accent:hover svg { transform: translateX(2px); }

.pm-footer-bottom {
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
  gap: 4px;
  padding: 14px 0 6px;
  border-top: 1px solid var(--c-line);
  color: var(--c-faint);
  font-size: 13px;
}

.pm-footer-bottom p span + span::before {
  content: "\00B7";
  margin: 0 8px;
  color: var(--c-line-2);
}

.pm-footer-legal { display: flex; flex-wrap: wrap; gap: 0 22px; }
.pm-footer-legal a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: var(--c-muted);
  transition: color .16s var(--c-ease);
}
.pm-footer-legal a:hover { color: var(--c-ink); }
.pm-footer-legal a[aria-current="page"] { color: var(--c-orange-hi); }

/* The oversized wordmark is the sign-off: the name, cut from the same dark
   stock as the page, catching light only at the top edge. */
.pm-footer-mark {
  margin-top: 18px;
  pointer-events: none;
  user-select: none;
}
.pm-footer-mark svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}
.pm-footer-mark text {
  font-family: var(--c-font);
  font-weight: 800;
  letter-spacing: 0;
}

@media (max-width: 619px) {
  .pm-footer-col:last-child { grid-column: 1 / -1; }
}

@media (min-width: 620px) {
  .pm-footer-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
  .chrome-shell { width: min(1200px, calc(100% - 56px)); }

  .masthead-in { min-height: 68px; }
  .masthead-link { display: inline-flex; }
  .masthead-cta { display: inline-flex; }

  .pm-footer { padding-top: 80px; }
  .pm-footer-top {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr);
    gap: 64px;
    padding-bottom: 64px;
  }
  /* Cap height of the wordmark sits on the same line as the column labels. */
  .pm-footer-brand .wordmark { min-height: 0; padding-block: 1px; }
  .pm-footer-cols { gap: 32px; }
  .pm-footer-col a { min-height: 36px; font-size: 14.5px; }
  .pm-footer .pm-footer-heading { margin-bottom: 12px; }

  .pm-footer-bottom {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 18px 0;
  }
  .pm-footer-legal a { min-height: 32px; }
  .pm-footer-mark { margin-top: 28px; }
}

@media (max-width: 360px) {
  .chrome-shell { width: min(100% - 28px, 1200px); }
}

@media (prefers-reduced-motion: reduce) {
  .masthead *,
  .pm-footer * { transition: none !important; }
}