@import url("https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=DM+Mono:wght@400;500&display=swap");

/* FORGE CT family.
   Shared: ink floor #070708, DM Sans + DM Mono, status pill, pill CTAs, numbered eyebrows.
   Unique to Infinite Heroes: gold #e8c94c wordmark accent. Not Sunny pink. Not Hard Hittin red. */

:root {
  --ink: #070708;
  --ink-raised: #101114;
  --paper: #0c0d10;
  --paper-deep: #14151a;
  --white: #f3efe6;
  --ink-soft: #b7b4ae;
  --slate: #8f8c86;
  --yellow: #e8c94c;
  --yellow-soft: #c9ab3a;
  --coral: #e5674d;
  --blue: #5270e6;
  --blue-deep: #3046c2;
}

body {
  background: #070708;
  color: #f3efe6;
  font-family: "DM Sans", Manrope, Arial, sans-serif;
}

.site-header {
  background: rgba(7, 7, 8, .92);
  border-bottom: 1px solid rgba(243, 239, 230, .08);
}

.brand__logo {
  max-height: 42px;
  width: auto;
  object-fit: contain;
}

.site-nav a {
  color: #d7d3cb;
  font-size: .86rem;
  letter-spacing: .04em;
}

.site-nav a.nav-cta,
.nav-cta {
  border: 0;
  border-radius: 999px;
  background: var(--yellow);
  color: #070708 !important;
  box-shadow: none;
  font-weight: 700;
}

.nav-cta:hover {
  background: #f3d76a;
  transform: none;
  box-shadow: none;
}

.button {
  border-radius: 999px;
  letter-spacing: .08em;
  font-weight: 700;
}

.button--primary {
  border: 0;
  background: var(--yellow);
  color: #070708;
  box-shadow: none;
}

.button--primary:hover {
  transform: none;
  box-shadow: none;
  filter: brightness(1.06);
}

.button--secondary {
  border-radius: 999px;
  border-color: rgba(243, 239, 230, .28);
  color: #f3efe6;
}

.button--dark {
  border-radius: 999px;
  background: var(--yellow);
  color: #070708;
  border: 0;
}

.hero {
  background:
    radial-gradient(ellipse at top left, rgba(232, 201, 76, .14), transparent 48%),
    #070708;
  border-bottom: 1px solid rgba(243, 239, 230, .08);
}

.hero::before,
.hero::after {
  opacity: .28;
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: 2.4rem;
  align-items: center;
}

.hero__photo {
  margin: 0;
  border-radius: 1.15rem;
  overflow: hidden;
  border: 1px solid rgba(243, 239, 230, .1);
  background: #101114;
}

.hero__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 5;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin: 0 0 1.15rem;
  padding: .45rem .8rem;
  border: 1px solid rgba(243, 239, 230, .14);
  border-radius: 999px;
  background: rgba(16, 17, 20, .86);
  color: #d7d3cb;
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.status-pill__dot {
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: #e5674d;
  box-shadow: 0 0 0 4px rgba(229, 103, 77, .16);
}

.eyebrow {
  color: #c9ab3a;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-size: .72rem;
  font-weight: 600;
}

.display {
  letter-spacing: -.04em;
  font-weight: 700;
}

.display em {
  font-style: italic;
  color: var(--yellow);
}

.home-intro,
.owner-section,
.content-section,
.page-hero {
  background: #0c0d10;
}

.category-section,
.content-section--paper-deep {
  background: #101114;
  border-color: rgba(243, 239, 230, .08);
}

.inside-section,
.site-footer,
.visit-section,
.page-hero--ink {
  background: #070708;
}

.intro-card,
.category-card,
.editorial-card,
.photo-feature,
.content-grid__aside {
  color: #14151a;
}

.intro-card,
.category-card {
  background: #f3efe6;
  box-shadow: none;
  border-color: transparent;
  border-radius: 1.15rem;
}

.category-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(0, 0, 0, .28);
}

.category-card__number {
  font-family: "DM Mono", ui-monospace, monospace;
  letter-spacing: .1em;
  color: #8a5a12;
}

.category-card__title,
.photo-feature h3,
.editorial-card h3,
.feature-list h3 {
  color: #14151a;
}

.owner-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .8fr);
  gap: 2rem;
  align-items: center;
}

.owner-photo {
  margin: 0;
  border-radius: 1.15rem;
  overflow: hidden;
  border: 1px solid rgba(243, 239, 230, .1);
}

.owner-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 5;
}

.visit-shop-card {
  border-radius: 1.15rem;
  box-shadow: none;
}

.visit-shop-card--details {
  background: var(--yellow);
  color: #14151a;
}

.visit-shop-card--hours {
  background: #101114;
  color: #f3efe6;
}

.visit-shop-card--social {
  background: #1a120f;
  color: #f3efe6;
  border: 1px solid rgba(232, 201, 76, .24);
}

.visit-shop-card--social h3,
.visit-shop-card--social p,
.visit-shop-card--social a {
  color: #f3efe6;
}

.visit-shop-card__social-links a {
  border-top-color: rgba(243, 239, 230, .16);
}

.visit-card--address {
  background: var(--yellow);
  color: #14151a;
}

.page-hero--yellow {
  background: var(--yellow);
  color: #14151a;
}

.page-hero--coral {
  background: #1a120f;
  color: #f3efe6;
}

.page-hero--blue {
  background: #101114;
}

.cta-band {
  background: #101114;
  border-top: 1px solid rgba(243, 239, 230, .08);
}

.feature-list__number {
  font-family: "DM Mono", ui-monospace, monospace;
  color: var(--yellow-soft);
}

.page-hero .eyebrow,
.cta-band .eyebrow {
  font-family: "DM Mono", ui-monospace, monospace;
}

@media (max-width: 860px) {
  .hero__grid,
  .owner-grid {
    grid-template-columns: 1fr;
  }

  .hero__photo img,
  .owner-photo img {
    aspect-ratio: 16 / 10;
  }
}