/* White Stag Acquisitions — brand tokens (source of truth: AGENTS.md) */
:root {
  --color-bg: #0a0a0a; /* near-black background */
  --color-text: #f4f4f4; /* off-white body text */
  --color-text-dim: #c5c1b6; /* secondary text */
  --color-gold: #f6b51b; /* primary gold — matches the logo S */
  --color-gold-soft: #f3c851; /* secondary gold accents */
  --color-bronze: #a4926a; /* borders, dividers, muted detail */
  --font-display: "Cinzel", serif; /* headings, wordmark treatments */
  --font-body: "Lato", sans-serif; /* everything else */
}

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

html {
  scroll-behavior: smooth;
  color-scheme: dark;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  height: auto;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 0.75em;
}

p {
  margin: 0 0 1em;
}

a {
  color: var(--color-gold-soft);
  text-decoration: none;
}

a:hover {
  color: var(--color-gold);
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 3px;
}

.container {
  max-width: 64rem;
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* Letterspaced small-caps label ("ACQUISITIONS" treatment) */
.kicker {
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-gold);
}

/* Off-screen until it takes keyboard focus, then it drops into the top-left
   corner. Fixed rather than absolute so it's reachable at any scroll depth. */
.skip-link {
  position: fixed;
  top: 0.75rem;
  left: -9999px;
  z-index: 200;
  padding: 0.6rem 1rem;
  background: var(--color-bg);
  border: 1px solid var(--color-bronze);
  color: var(--color-text);
  font-size: 0.875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.skip-link:focus {
  left: 1.25rem;
}

/* Focusing <main> is what makes the skip actually move the keyboard, but the
   ring around a whole page of content is noise. */
main[tabindex="-1"]:focus {
  outline: none;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- Header / nav ---------- */
:root {
  /* Logo + vertical padding + border. The panel opens directly beneath the
     header, and the scroll lock has to give back exactly this much room when
     the header leaves the flow, so all three have to agree on the number. */
  --header-h: calc(52px + 1.5rem + 1px);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-bg);
  border-bottom: 1px solid rgba(164, 146, 106, 0.35);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.site-logo img {
  display: block;
  height: 52px;
  width: auto;
}

/* Hamburger toggle: mobile only. The 44px box is the tap target; the bars
   inside stay visually light. */
.nav-toggle {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-right: -0.6rem;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}

.nav-toggle-bars {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 26px;
}

.nav-toggle-bars span {
  display: block;
  height: 2px;
  background: var(--color-text);
  transition: transform 0.25s ease, opacity 0.15s ease,
    background-color 0.25s ease;
}

.nav-toggle:hover .nav-toggle-bars span {
  background: var(--color-gold);
}

/* Bars fold into an X while the panel is open. The 7px shift is one bar
   height plus one gap, which lands both outer bars on the middle one. Gold
   marks the open state, so the header reads as "close" at a glance. */
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span {
  background: var(--color-gold);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* The panel fills everything below the header, which stays put and shows the
   close control. overflow-y matters on short landscape screens, where the
   links can outrun the space. */
.site-nav {
  position: fixed;
  top: var(--header-h);
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 90;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  padding: 2.5rem 1.25rem 3rem;
  overflow-y: auto;
  background: var(--color-bg);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.28s ease, visibility 0.28s ease;
}

.site-nav.is-open {
  opacity: 1;
  visibility: visible;
}

/* Set on <html> while the panel is open so the page behind it can't scroll */
.has-nav-open,
.has-nav-open body {
  overflow: hidden;
}

/* That scroll lock takes away the scrollport the header sticks to, so a
   sticky header drops back to its static position at the top of the document.
   At scroll 0 that's where it already was; any further down the page it lands
   off-screen, taking the only control that closes the panel with it. Pin it to
   the viewport for as long as the lock is on. */
.has-nav-open .site-header {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
}

/* Pinning the header takes it out of the flow, so everything below it would
   collapse upward by its height. The panel fades in over that, which reads as
   the page lurching up behind it. Give the space back for as long as the
   header is pinned. */
.has-nav-open body {
  padding-top: var(--header-h);
}

.site-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

/* Cinzel is wide: the clamp keeps "Submit an Opportunity" on one line down
   to a 320px viewport. */
.site-nav a {
  display: inline-block;
  padding: 0.25rem 0;
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: clamp(1.0625rem, 4.5vw, 1.5rem);
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1.3;
  text-align: center;
  text-transform: uppercase;
  border-bottom: 2px solid transparent;
}

.site-nav a:hover {
  color: var(--color-gold);
}

/* Matches both aria-current="page" (the bare page link) and "location" (a
   link to a section of the page you're already on), which js/main.js swaps
   between as the hash changes. */
.site-nav a[aria-current] {
  color: var(--color-gold-soft);
  border-bottom-color: var(--color-gold);
}

/* Outranks .section-divider's bottom margin, which is defined further down */
.site-nav .nav-divider {
  margin: 0;
}

.nav-phone {
  margin: 0;
}

.nav-phone a {
  font-family: var(--font-body);
  font-size: 1rem;
  letter-spacing: 0.04em;
  color: var(--color-text-dim);
}

.nav-phone a:hover {
  color: var(--color-gold);
}

/* Desktop: the panel unwinds back into a plain row of links */
@media (min-width: 48rem) {
  .site-header .container {
    padding-top: 1rem;
    padding-bottom: 1rem;
    transition: padding 0.25s ease;
  }

  /* .nav-panel-only: the panel has room to deep-link into the contact page's
     sections. The desktop row keeps the four top-level pages, unchanged. */
  .nav-toggle,
  .nav-divider,
  .nav-phone,
  .nav-panel-only {
    display: none;
  }

  .site-nav {
    position: static;
    z-index: auto;
    gap: 0;
    padding: 0;
    overflow: visible;
    background: none;
    opacity: 1;
    visibility: visible;
    transition: none;
  }

  .site-nav ul {
    flex-direction: row;
    gap: 0.25rem 1.75rem;
  }

  .site-nav a {
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: 400;
    letter-spacing: 0.06em;
  }

  .site-logo img {
    height: 88px;
    transition: height 0.25s ease;
  }

  /* Compact state once the page is scrolled (toggled by js/main.js) */
  .site-header.is-scrolled .container {
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
  }

  .site-header.is-scrolled .site-logo img {
    height: 52px;
  }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  padding: 0.8rem 1.9rem;
  background: transparent;
  cursor: pointer;
  border: 1px solid var(--color-gold);
  color: var(--color-gold);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}

.btn:hover {
  background: var(--color-gold);
  color: var(--color-bg);
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 28rem;
  overflow: hidden;
}

@media (min-width: 48rem) {
  .hero {
    min-height: 34rem;
  }
}

.hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* keep the stag (right-of-center) in frame as the viewport narrows */
  object-position: 68% center;
}

/* Dark scrim so the hero text holds contrast. On mobile the text spans
   nearly the full width, so the scrim stays deep across most of the frame;
   on desktop it eases off to the right to let the stag glow. The first
   (top) layer fades the image into the page background at the bottom so
   there's no hard seam where the photo meets the black below it. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, transparent 92%, var(--color-bg) 100%),
    linear-gradient(
      to right,
      rgba(10, 10, 10, 0.88) 0%,
      rgba(10, 10, 10, 0.85) 55%,
      rgba(10, 10, 10, 0.55) 80%,
      rgba(10, 10, 10, 0.4) 100%
    );
}

@media (min-width: 48rem) {
  .hero::after {
    background:
      linear-gradient(to bottom, transparent 92%, var(--color-bg) 100%),
      linear-gradient(
        to right,
        rgba(10, 10, 10, 0.88) 0%,
        rgba(10, 10, 10, 0.6) 38%,
        rgba(10, 10, 10, 0.15) 62%,
        rgba(10, 10, 10, 0) 80%
      );
  }
}

.hero-content {
  position: relative;
  z-index: 1;
  max-width: 64rem;
  width: 100%;
  margin: 0 auto;
  padding: 2rem 1.25rem;
}

@media (min-width: 48rem) {
  .hero-content {
    padding: 4rem 1.25rem;
  }
}

.hero-inner {
  max-width: 30rem;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.65);
}

.hero h1 {
  font-size: clamp(2rem, 5.5vw, 3.25rem);
  margin: 0.5rem 0 1rem;
}

.hero-tagline {
  font-size: 1.125rem;
  color: var(--color-text);
  margin-bottom: 2rem;
}

@media (min-width: 64rem) {
  .hero {
    min-height: 38rem;
  }
}

/* ---------- Sections ---------- */
.section {
  padding: 2.25rem 0;
}

.section p:last-child {
  margin-bottom: 0;
}

@media (min-width: 48rem) {
  .section {
    padding: 4rem 0;
  }
}

.section h2 {
  font-size: clamp(1.5rem, 4vw, 2rem);
}

.section-divider {
  width: 4rem;
  height: 1px;
  background: var(--color-bronze);
  border: 0;
  margin: 0 0 1.5rem;
}

.section--center {
  text-align: center;
}

/* Separates the three options on the Start a Conversation page */
.section--ruled {
  border-top: 1px solid rgba(164, 146, 106, 0.35);
}

/* The header is sticky at every width, so anchor jumps need to clear it or the
   section heading lands underneath it. Mobile's bar is shorter than desktop's. */
.section[id],
main[tabindex="-1"] {
  scroll-margin-top: 5rem;
}

@media (min-width: 48rem) {
  .section[id],
  main[tabindex="-1"] {
    scroll-margin-top: 5.5rem;
  }
}

.section--center .section-divider {
  margin-left: auto;
  margin-right: auto;
}

.lead {
  font-size: 1.1875rem;
  color: var(--color-text-dim);
  max-width: 42rem;
}

/* .lead is capped at 42rem, so in any centered block it needs auto margins or
   the box hugs the left edge of the wider container and its centered text
   lands off-axis from the headings and buttons around it. */
.section--center .lead,
.closing-cta .lead {
  margin-left: auto;
  margin-right: auto;
}

/* ---------- Philosophy strip ---------- */
.philosophy {
  border-top: 1px solid rgba(164, 146, 106, 0.35);
  border-bottom: 1px solid rgba(164, 146, 106, 0.35);
  padding: 2.5rem 0;
}

.philosophy ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.philosophy-rows {
  display: grid;
  gap: 1.25rem;
  text-align: center;
}

.philosophy li {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text);
}

.philosophy em {
  font-style: normal;
  color: var(--color-gold-soft);
}

/* One row on desktop, pipe-divided; stacked with no pipe on mobile */
@media (min-width: 48rem) {
  .philosophy-rows {
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 1.5rem;
  }

  .philosophy-rows li + li::before {
    content: "|";
    color: var(--color-bronze);
    margin-right: 1.5rem;
    font-weight: 400;
  }

  /* The About page carries all four lines. Four pipe-divided items overrun the
     container, so they pair up into a 2x2 block instead of one row. */
  .philosophy-rows.philosophy-rows--quad {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem 3rem;
  }

  .philosophy-rows.philosophy-rows--quad li + li::before {
    content: none;
  }
}

/* ---------- Path chooser (Start a Conversation) ---------- */
/* Three ways in, listed under the page intro. Stacked on mobile, one
   pipe-divided row on desktop, matching the philosophy strip treatment. */
.path-nav {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
  text-align: center;
}

.path-nav a {
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

@media (min-width: 48rem) {
  .path-nav {
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 1.5rem;
  }

  .path-nav li + li::before {
    content: "|";
    color: var(--color-bronze);
    margin-right: 1.5rem;
    font-weight: 400;
  }
}

/* ---------- Closing CTA ---------- */
.closing-cta {
  padding: 5rem 0;
  text-align: center;
}

.closing-cta h2 {
  max-width: 34rem;
  margin-left: auto;
  margin-right: auto;
}

.closing-cta .btn {
  margin-top: 1rem;
}

/* Quiet close for Start a Conversation, the one page that ends without a
   closing CTA. It doesn't need one: the three options above it are the calls
   to action. This just gives the page a beat before the footer. */
.signoff {
  padding: 3.5rem 0 4.5rem;
  text-align: center;
}

.signoff .section-divider {
  margin: 0 auto 1.75rem;
}

.signoff p {
  margin: 0;
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1.9;
  text-transform: uppercase;
  color: var(--color-text-dim);
}

/* ---------- About ---------- */
.about-grid {
  display: grid;
  gap: 2.5rem;
  align-items: start;
}

.about-photo img {
  display: block;
  width: 100%;
  border: 1px solid rgba(164, 146, 106, 0.45);
}

.about-story p {
  color: var(--color-text-dim);
}

.about-story p:first-of-type {
  color: var(--color-text);
}

@media (min-width: 48rem) {
  .about-grid {
    grid-template-columns: 20rem 1fr;
    gap: 3.5rem;
  }
}

/* Marks the shift from the company sections to Josh's story on the About page */
.section--founder {
  border-top: 1px solid rgba(164, 146, 106, 0.35);
}

.pull-quote {
  margin: 0;
  padding: 3.5rem 0;
  text-align: center;
  border-top: 1px solid rgba(164, 146, 106, 0.35);
  border-bottom: 1px solid rgba(164, 146, 106, 0.35);
}

.pull-quote p {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 3vw, 1.625rem);
  font-weight: 600;
  color: var(--color-gold-soft);
  max-width: 38rem;
  margin: 0 auto 1rem;
}

.pull-quote cite {
  font-style: normal;
  font-size: 0.9375rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-dim);
}

.location-line {
  text-align: center;
  color: var(--color-text-dim);
  font-size: 0.9375rem;
  letter-spacing: 0.06em;
}

/* Narrower reading column for the About page's longer prose sections.
   Overrides .container's 64rem while keeping its centering and padding. */
.prose {
  max-width: 42rem;
}

.prose p {
  color: var(--color-text-dim);
}

/* Bronze dash markers, matching the divider language used elsewhere */
.serve-list {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
}

.serve-list li {
  position: relative;
  margin-bottom: 0.75rem;
  padding-left: 1.5rem;
  color: var(--color-text-dim);
}

.serve-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.8em;
  width: 0.6rem;
  height: 1px;
  background: var(--color-bronze);
}

/* ---------- Capital Solutions ---------- */
/* Ten financing types is a long scroll in one column. Multi-column rather than
   grid so the list still reads top-to-bottom down column one, then column two. */
@media (min-width: 48rem) {
  .solutions-list {
    columns: 2;
    column-gap: 2.5rem;
  }

  .solutions-list li {
    break-inside: avoid;
  }
}

/* Josh's parenthetical on "Business credit" is a scope limit on that one item,
   not part of its name. */
.solutions-list .qualifier {
  display: block;
  font-size: 0.875rem;
}

/* The mission line is quoted, but it's the company's own statement, so it
   carries a label instead of an attribution. */
.pull-quote--mission .kicker {
  font-size: 0.8125rem;
  letter-spacing: 0.3em;
  color: var(--color-gold);
  margin-bottom: 1.25rem;
}

.pull-quote--mission p:last-child {
  margin-bottom: 0;
}

/* Two short lines that land a section. Same treatment as .signoff, but inline
   in the flow rather than closing the page. Element-qualified so it outranks
   .prose p, which would otherwise repaint it as body copy. */
p.emphasis-lines {
  margin: 2rem 0 0;
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 2;
  text-transform: uppercase;
  color: var(--color-text-dim);
}

p.emphasis-lines em {
  font-style: normal;
  color: var(--color-gold-soft);
}

/* Regulatory small print: White Stag is not a lender, and this page has to say
   so plainly. Quiet, but dim-on-black still clears contrast at this size. */
.disclaimer {
  border-top: 1px solid rgba(164, 146, 106, 0.35);
  padding: 2.5rem 0 3rem;
}

.disclaimer p {
  max-width: 46rem;
  margin: 0 auto;
  font-size: 0.8125rem;
  line-height: 1.7;
  color: var(--color-text-dim);
  text-align: center;
}

/* ---------- Forms ---------- */
.form-wrap {
  max-width: 36rem;
  margin: 2.5rem auto 0;
  text-align: left;
}

.form-field {
  margin-bottom: 1.5rem;
}

.form-field label {
  display: block;
  margin-bottom: 0.4rem;
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: 0.04em;
  color: var(--color-text);
}

.form-field .optional {
  font-weight: 400;
  color: var(--color-text-dim);
}

.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  padding: 0.75rem 0.9rem;
  background: #141414;
  border: 1px solid rgba(164, 146, 106, 0.5);
  color: var(--color-text);
  font: inherit;
  border-radius: 0;
}

.form-field input:focus-visible,
.form-field select:focus-visible,
.form-field textarea:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
  border-color: var(--color-gold);
}

.form-field textarea {
  min-height: 9rem;
  resize: vertical;
}

.form-field input,
.form-field select {
  height: 3.25rem;
}

.form-field select {
  cursor: pointer;
}

/* Customizable select (Chromium 135+): real padding and pointer cursors in
   the options panel; other browsers keep their native popup */
@supports (appearance: base-select) {
  .form-field select,
  .form-field select::picker(select) {
    appearance: base-select;
  }

  .form-field select::picker(select) {
    background: #141414;
    border: 1px solid rgba(164, 146, 106, 0.5);
    padding: 0.35rem 0 0rem;
  }

  .form-field select option {
    padding: 0.55rem 0.9rem;
    cursor: pointer;
  }

  .form-field select option:hover,
  .form-field select option:focus {
    background: rgba(164, 146, 106, 0.18);
  }
}

.form-note {
  margin-top: 1.5rem;
  font-size: 0.8125rem;
  color: var(--color-text-dim);
}

/* Two-column field layout on wider screens */
@media (min-width: 48rem) {
  form.form-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 1.5rem;
  }

  .form-wrap .form-field--full,
  .form-wrap button,
  .form-wrap .form-note,
  .form-wrap .hp-field {
    grid-column: 1 / -1;
  }

  .form-wrap button {
    justify-self: start;
  }
}

/* Honeypot — hidden from humans, visible to bots */
.hp-field {
  display: none;
}

/* ---------- Contact ---------- */
.contact-list {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: grid;
  gap: 1rem;
  font-size: 1.125rem;
}

.contact-list a {
  color: var(--color-text);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.contact-list a:hover {
  color: var(--color-gold);
}

/* ---------- Page stub ---------- */
.page-stub {
  padding: 6rem 0;
  text-align: center;
}

.page-stub p {
  color: var(--color-text-dim);
}

/* ---------- Back to top ---------- */
/* Square, not round: nothing on this site has a corner radius. Sits below the
   header's stacking context so the nav panel always covers it. */
.to-top {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  /* Opaque, not translucent: it floats over body copy, and the page behind it
     is flat black anyway, so there's nothing to let through but the text. */
  background: var(--color-bg);
  border: 1px solid var(--color-bronze);
  color: var(--color-gold);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease,
    background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* Added by js/main.js once the page is scrolled past the threshold */
.to-top.is-visible {
  opacity: 1;
  visibility: visible;
}

.to-top:hover {
  background: var(--color-gold);
  border-color: var(--color-gold);
  color: var(--color-bg);
}

/* The panel already covers the page and offers the nav; a second floating
   control on top of it is noise. */
.has-nav-open .to-top {
  opacity: 0;
  visibility: hidden;
}

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid rgba(164, 146, 106, 0.35);
  padding: 3rem 0 2.5rem;
  text-align: center;
}

.footer-wordmark {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text);
  margin-bottom: 0.25rem;
}

.footer-sub {
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--color-gold-soft);
  margin-bottom: 1.5rem;
}

.footer-legal {
  color: var(--color-text-dim);
  font-size: 0.8125rem;
  margin: 0;
}

/* On one line this runs under the back-to-top button on phone widths, so it
   breaks in two and the middot goes with it. 27rem is where the single line
   starts clearing the button on its own. */
@media (max-width: 27rem) {
  .footer-legal .footer-place,
  .footer-legal .footer-copy {
    display: block;
  }

  .footer-legal .footer-sep {
    display: none;
  }
}

/* ---------- Motion preferences ---------- */
/* Everything still works, it just happens instantly. The long smooth scroll
   back to the top is the most likely of these to bother anyone, so drop it
   too; js/main.js checks the same query before scrolling. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .to-top {
    transition: none;
  }
}

@media (max-width: 47.9375rem) and (prefers-reduced-motion: reduce) {
  .site-nav,
  .nav-toggle-bars span {
    transition: none;
  }
}