:root {
  --serif: 'Manrope', Arial, sans-serif;
}

/* The compact studio signature is used in the header and footer. */
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: 'Space Grotesk', Arial, sans-serif;
  text-decoration: none;
  white-space: nowrap;
}

.wordmark-short {
  font-size: 38px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.13em;
}

.wordmark-short span { color: #c36b48; }

.wordmark-name {
  font-family: 'DM Sans', Arial, sans-serif;
  font-size: 8px;
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: .15em;
}

/* Manrope gives the editorial copy a more direct, confident voice. */
.hero h1,
.section-heading h2,
.about-section h2,
.contact-section h2,
.manifesto p,
.art-card-one strong,
.art-card-two strong {
  font-family: 'Manrope', Arial, sans-serif;
  font-weight: 800;
  letter-spacing: -.052em;
  word-spacing: .06em;
  line-height: 1.04;
}

.hero h1 em,
.section-heading h2 em,
.about-section h2 em,
.contact-section h2 em,
.manifesto p em,
.art-card-one strong em,
.art-card-two strong em {
  font-style: normal;
  font-weight: 800;
  color: #bc6748;
}

.hero h1 { font-size: clamp(62px, 6.2vw, 101px); }
.section-heading h2,
.about-section h2,
.contact-section h2 { font-size: clamp(55px, 6.2vw, 88px); }
.manifesto p { font-size: clamp(34px, 3.5vw, 54px); }
.art-card-one strong { font-size: clamp(33px, 3vw, 44px); }
.art-card-two strong { font-size: clamp(34px, 3.4vw, 48px); }

.project-body h3 {
  font-family: 'Manrope', Arial, sans-serif;
  font-weight: 800;
  letter-spacing: -.055em;
}

.about-copy p {
  font-family: 'DM Sans', Arial, sans-serif;
  font-size: clamp(20px, 2vw, 25px);
  font-weight: 400;
  line-height: 1.48;
  letter-spacing: -.025em;
}

.contact-email {
  font-family: 'Manrope', Arial, sans-serif;
  font-weight: 700;
  letter-spacing: -.06em;
}

/* Keep the full product and brand artwork visible inside its card. */
.theme-onhnd .project-visual { background: #edf4fa; }
.theme-onhnd .project-visual img,
.featured.theme-onhnd .project-visual img { object-fit: contain; }

.theme-shiftie .project-visual { background: #102638; }
.theme-shiftie .shiftie-frame { position: absolute; inset: 0; container-type: size; }
.theme-shiftie .shiftie-artwork {
  position: absolute;
  top: 50%;
  left: 0;
  width: max(100cqw, 190.476cqh);
  height: max(100cqh, 52.5cqw);
  container-type: size;
  transform: translateY(-50%);
  transition: transform .7s cubic-bezier(.2,.7,.2,1);
}

.theme-shiftie .shiftie-artwork > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: fill;
}

.theme-shiftie .shiftie-badge-cover {
  position: absolute;
  z-index: 1;
  top: 85.5%;
  left: 4.2%;
  width: 16.4%;
  height: 10.8%;
  display: grid;
  place-items: center;
  background-image: url('assets/shiftie-lounge.jpg');
  background-size: 100cqw 100cqh;
  background-position: -25cqw -87cqh;
  background-repeat: no-repeat;
}

.theme-shiftie .shiftie-domain-pill {
  width: 72%;
  height: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .7cqw;
  border-radius: 999px;
  background: #f4f0e8;
  color: #10283b;
  font-family: 'DM Sans', Arial, sans-serif;
  font-size: 1.28cqw;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .08em;
  white-space: nowrap;
}

.theme-shiftie .shiftie-domain-dot {
  width: .9cqw;
  height: .9cqw;
  flex: none;
  border-radius: 50%;
  background: #d76c5b;
}

.theme-shiftie:hover .shiftie-artwork { transform: translateY(-50%) scale(1.035); }

.theme-notarus .project-visual img { object-position: center center; transform: scale(1.22); }
.theme-notarus:hover .project-visual > img:first-child { transform: scale(1.22); }

.vintage-visual .vintage-mark { border-radius: 50%; }

.theme-couch .couch-visual {
  display: grid;
  place-items: center;
  background: #dfe6d6;
}

.couch-lockup {
  width: min(76%, 380px);
  aspect-ratio: 1;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
}

.couch-lockup img {
  display: block;
  width: 100%;
  height: auto;
  flex: none;
  object-fit: contain;
  object-position: center;
  mix-blend-mode: darken;
}

.couch-lockup strong {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(33px, 4.4vw, 46px);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  letter-spacing: -.065em;
  color: #233e35;
}

.couch-lockup strong span { color: #237b52; }
.couch-lockup strong i { font-style: normal; color: #ad7d53; }

@media (min-width: 761px) and (max-width: 1050px) {
  .hero-art .orbit-two { width: 60%; }
}

@media (max-width: 760px) {
  .hero h1 { font-size: clamp(52px, 10vw, 75px); }
  .section-heading h2,
  .about-section h2,
  .contact-section h2 { font-size: clamp(49px, 9vw, 66px); }
  .manifesto p { font-size: clamp(32px, 6vw, 45px); }
  .couch-lockup strong { font-size: clamp(33px, 8vw, 46px); }
}

@media (max-width: 480px) {
  .wordmark { gap: 8px; }
  .wordmark-short { font-size: 33px; }
  .hero h1 { font-size: clamp(46px, 11.8vw, 62px); }
  .section-heading h2,
  .about-section h2,
  .contact-section h2 { font-size: clamp(45px, 10.5vw, 60px); }
  .contact-email { font-size: clamp(25px, 6.5vw, 34px); }
}

/* Categories, status, titles, and actions each have a distinct visual role. */
.project-body { padding-top: 22px; }

.project-meta {
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  color: #965038;
  font-size: 10px;
  letter-spacing: .1em;
}

.project-meta .status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 9px;
  border: 1px solid #c9d5c5;
  border-radius: 4px;
  background: #e5ecdf;
  color: #3f5849;
  font-size: 9px;
  letter-spacing: .08em;
  line-height: 1.2;
}

.status-badge::before {
  content: '';
  width: 5px;
  height: 5px;
  flex: none;
  border-radius: 50%;
  background: currentColor;
}

.project-meta .status-progress {
  background: #eee5d4;
  border-color: #ddd0b7;
  color: #76602e;
}

.project-meta .status-concept {
  background: #e9e4e0;
  border-color: #d4cbc4;
  color: #6c5a4e;
}

.project-body h3 {
  width: 100%;
  font-size: clamp(38px, 4vw, 54px);
  line-height: 1.08;
  margin: 18px 0 16px;
  color: #243b35;
}

.featured .project-body h3 {
  font-size: clamp(48px, 5.5vw, 80px);
  margin-top: 26px;
}

.project-title-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  text-decoration: none;
}

.project-body h3 .project-name {
  font: inherit;
  letter-spacing: inherit;
  margin: 0;
  min-width: 0;
}

.project-body h3 .project-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: 50%;
  background: #ac583d;
  color: #fffaf4;
  font-family: 'DM Sans', Arial, sans-serif;
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
  margin: 0;
  transition: background .2s, transform .2s;
}

.project-title-link:hover .project-arrow {
  background: #87432d;
  transform: translate(2px, -2px);
}

.project-body p { color: #626961; }

.project-link {
  color: #954b34;
  border-bottom-color: #c99076;
}

.project-note { color: #80786b; }

@media (max-width: 480px) {
  .project-meta { font-size: 9px; gap: 9px; }
  .project-body h3 { font-size: clamp(35px, 10.5vw, 43px); }
  .featured .project-body h3 { font-size: 52px; }
  .project-body h3 .project-arrow { width: 36px; height: 36px; flex-basis: 36px; font-size: 20px; }
}