/* The dark look shared by the home page and the inner pages (What we buy, How it works, FAQ, About,
   Partners & resellers): navy, white type, gold accents, the site header in white over the sunset photo,
   and a dark footer. body.photo-chrome turns it on; the request form, account and policy pages don't use it. */

.photo-chrome {
  --hp-ink: #0f1b2b;
  --hp-gold: #f2b56b;
  --hp-gutter: clamp(12px, 2.2vw, 28px);
  --hp-pad: clamp(20px, 3.4vw, 52px);
  --hp-ease: cubic-bezier(.22, .7, .2, 1);
  position: relative;
  margin: 0;
  background: var(--hp-ink);
  color: #fff;
  font-family: var(--f-body);
}
.photo-chrome main, .photo-chrome footer { position: relative; z-index: 1; }

/* ---------- the site header, white over the photo ---------- */
.photo-chrome .bar { position: absolute; left: 0; right: 0; top: var(--hp-gutter); background: transparent; backdrop-filter: none;
  -webkit-backdrop-filter: none; border: 0; }
.photo-chrome .bar > .wrap { max-width: none; padding-inline: calc(var(--hp-gutter) + var(--hp-pad)); padding-block: clamp(14px, 2.4vh, 26px); }
.photo-chrome .bar .wordmark .logo, .photo-chrome .bar .wm-text { color: #fff; }
.photo-chrome .bar .wm-text em { color: var(--hp-gold); }
.photo-chrome .btn-primary { background: #fff; color: var(--hp-ink); border-radius: 999px; }
.photo-chrome .btn-primary:hover { background: #f1ece2; }
.photo-chrome :focus-visible { outline-color: var(--hp-gold); }
@media (min-width: 1181px) {
  .photo-chrome .bar nav a.link, .photo-chrome .bar .actions a.link { color: rgba(255,255,255,.9); }
  .photo-chrome .bar nav a.link:hover, .photo-chrome .bar .actions a.link:hover { color: #fff; }
  .photo-chrome .bar nav a.link.on { color: #fff; text-decoration-color: var(--hp-gold); }
}
@media (max-width: 1180px) {
  .photo-chrome .bar > .wrap { padding-inline: calc(var(--hp-gutter) + 12px); padding-block: 8px; }
  .photo-chrome .menu-btn { color: #fff; border-color: rgba(255,255,255,.85); }
  /* the open menu is navy on the home page too, matching the dark inner pages (Luke, 10/28); its button keeps the site's gold */
  .photo-chrome .menu { --oyster: #0f1b2b; --line: rgba(255,255,255,.16); --pluff: #fff; --mute: rgba(255,255,255,.86);
    border-bottom: 1px solid rgba(255,255,255,.22); box-shadow: 0 24px 40px rgba(0,0,0,.55); }
  .photo-chrome .menu .btn-primary { background: var(--spartina); color: var(--spartina-ink); border-radius: 6px; }
}

/* the site footer, on a dark shade over the photo */
.photo-chrome footer { --marsh-ink: #fff; background: rgba(10,18,32,.78); color: rgba(255,255,255,.88);
  border-top: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.photo-chrome footer a { color: #fff; }


/* Recently bought and customers' words: the layout is in site.css (every page); over the photo, dark colors */
.photo-chrome .finds li { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); }
.photo-chrome .finds span { color: #fff; background: rgba(15,27,43,.92); }
.photo-chrome .words blockquote { color: #fff; }
.photo-chrome .words figcaption { color: #f2b56b; }