/* quartz.gg: the company. Everything it makes as one board, how it fits together, how it works. */

.q-make .big, .q-map .big, .q-how .big { margin-bottom: 3.5rem; }

/* Everything we make */
.q-board { grid-auto-rows: minmax(250px, auto); }
.q-tile-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.q-tile-head h3 { font-size: 2.4rem; }
.q-logo { height: 40px; width: auto; }
.q-logo--nova { height: 52px; }
.q-go { width: 46px; height: 46px; flex: none; border-radius: 50%; background: rgba(255, 255, 255, 0.16); display: flex; align-items: center; justify-content: center; transition: transform 0.2s ease; }
.q-hello .q-go { background: rgba(15, 15, 17, 0.12); }
.q-go svg { width: 20px; height: 20px; }
a.tile:hover .q-go, a.q-tile-head:hover .q-go, a.q-win:hover .q-go { transform: rotate(45deg); }
.tile .q-say { font-size: 1.15rem; opacity: 0.8; max-width: 32ch; margin-top: 1rem; }
/* Eucaly: the games as windows, like the old quartz.gg */
a.q-tile-head { text-decoration: none; }
.q-wins { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 2rem; }
.q-win { text-decoration: none; color: inherit; background: #1F3341; border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; }
.q-win-art { position: relative; display: block; height: 280px; overflow: hidden; background: var(--field, #10283b); }
.q-win-art img { position: absolute; inset: 0; margin: auto; height: 84%; width: auto; max-width: 84%; object-fit: contain; filter: drop-shadow(0 18px 22px rgba(0, 0, 0, 0.4)); transition: transform 0.5s cubic-bezier(0.2, 0.6, 0.2, 1); }
.q-win-art--scene img { height: 100%; width: 100%; max-width: none; object-fit: cover; filter: none; }
.q-win-art--flat img { filter: none; }
.q-win:hover .q-win-art img { transform: scale(1.04); }
.q-win-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.9rem 0.9rem 0.9rem 1.2rem; }
.q-win-foot b { font-family: var(--head); font-weight: 600; font-size: 1.3rem; letter-spacing: -0.02em; }
.q-win-foot .q-go { width: 40px; height: 40px; }
.q-win-foot .q-go svg { width: 17px; height: 17px; }
.q-roomy { padding-bottom: 0; }
.q-roomy:hover .q-roomy-art { transform: scale(1.04); }
.q-roomy-art { transition: transform 0.5s cubic-bezier(0.2, 0.6, 0.2, 1); margin: auto -1.75rem 0; width: calc(100% + 3.5rem); max-width: none; height: 430px; object-fit: cover; object-position: 58% 40%; }
.q-hello .tag { opacity: 1; font-size: 0.95rem; }
.q-mail { margin-top: auto !important; font-family: var(--head); font-weight: 600; font-size: clamp(2rem, 4.4vw, 3.6rem); letter-spacing: -0.04em; opacity: 1 !important; }

/* How it fits together */
.q-map { --bg: #0F0F11; --fg: #fff; }
.q-root { display: inline-flex; align-items: center; gap: 1rem; padding: 1.1rem 1.4rem 1.1rem 1.1rem; background: #EBB9A4; color: #0F0F11; border-radius: 18px; }
.q-root img { width: 48px; height: 48px; padding: 9px; background: #0F0F11; border-radius: 12px; }
.q-root > span, .q-node > span:last-child { display: flex; flex-direction: column; gap: 0.15rem; }
.q-root strong, .q-node strong { font-family: var(--head); font-weight: 600; font-size: 1.25rem; letter-spacing: -0.02em; }
.q-root small, .q-node small { font-size: 0.88rem; opacity: 0.65; }
.q-branches { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 3rem; padding-top: 2.5rem; position: relative; }
.q-branches::before { content: ''; position: absolute; top: 0; left: 2.75rem; right: calc(33.33% - 2.75rem + 0.33rem); height: 2px; background: rgba(255, 255, 255, 0.3); }
.q-branches::after { content: ''; position: absolute; top: -3rem; left: 2.75rem; width: 2px; height: 3rem; background: rgba(255, 255, 255, 0.3); }
.q-branch { position: relative; background: #1C1C1F; border-radius: var(--r); padding: 1.1rem; }
.q-branch::before { content: ''; position: absolute; top: -2.5rem; left: 2.7rem; width: 2px; height: 2.5rem; background: rgba(255, 255, 255, 0.3); }
.q-node { display: flex; align-items: center; gap: 0.9rem; padding: 0.4rem 0.4rem 1rem; }
.q-node-icon { width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center; flex: none; color: #fff; }
.q-node-icon img { height: 28px; width: auto; }
.q-node-icon svg { width: 26px; height: 26px; }
.q-branch ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.q-branch li { display: flex; align-items: center; gap: 0.8rem; background: #2A2A2E; border-radius: 14px; padding: 0.6rem 0.9rem 0.6rem 0.6rem; font-weight: 500; }
.q-branch li img { width: 36px; height: 36px; object-fit: contain; border-radius: 9px; background: rgba(255, 255, 255, 0.06); padding: 3px; }
.q-branch li .q-li-photo { object-fit: cover; padding: 0; }
.q-li-icon { width: 36px; height: 36px; border-radius: 9px; background: rgba(255, 255, 255, 0.06); display: flex; align-items: center; justify-content: center; }
.q-li-icon svg { width: 18px; height: 18px; }
.q-branch em { font-style: normal; font-size: 0.75rem; font-weight: 600; color: #EBB9A4; margin-left: auto; }

/* How we work */
.q-how { --bg: #EBB9A4; --fg: #0F0F11; }
.q-how .tile svg { width: 34px; height: 34px; margin-bottom: 1.25rem; }
.q-how .tile h3 { font-size: 1.9rem; }
.q-how .tile p { font-size: 1.08rem; max-width: 40ch; }
.q-where { justify-content: flex-end; }
.q-where-art { display: flex; align-items: center; gap: 1.25rem; margin-bottom: auto; padding: 1.5rem 0 3rem; }
.q-app { width: 120px; height: 120px; border-radius: 30px; display: flex; align-items: center; justify-content: center; }
.q-app svg { width: 60px !important; height: 60px !important; margin: 0 !important; }
.q-app--discord { background: #5865F2; color: #fff; }
.q-app--web { background: #0F0F11; color: #EBB9A4; }
.q-plus { font-family: var(--head); font-size: 2.5rem; font-weight: 600; opacity: 0.35; }
.q-short svg { color: #EBB9A4; }
.q-use svg { color: #C0573A; }

/* Two lines: Quartz makes / games and apps. */
.hero h1 { max-width: none; }
@media (max-width: 640px) { .hero h1 { font-size: 2.6rem; } }

/* Get in touch */
.q-end { text-align: center; }
.q-end-inner { display: flex; flex-direction: column; align-items: center; }
.q-end .btn { margin-top: 2.75rem; }
.q-nova::after { content: ''; position: absolute; right: -90px; bottom: -120px; width: 560px; height: 530px; background: url('/img/nova-backdrop.svg') right bottom / contain no-repeat; filter: brightness(1.7); pointer-events: none; transition: transform 0.5s cubic-bezier(0.2, 0.6, 0.2, 1); transform-origin: right bottom; }
.q-nova:hover::after { transform: scale(1.04); }
.q-nova > * { position: relative; z-index: 1; }

@media (max-width: 900px) {
  .q-wins { grid-template-columns: 1fr; }
  .q-win-art { height: 240px; }
  .q-branches { grid-template-columns: 1fr; padding-top: 1.5rem; }
  .q-branches::before { display: none; }
  .q-branches::after { top: -3rem; height: 4.5rem; }
  .q-branch::before { display: none; }
  .q-branch + .q-branch::before { display: block; top: -1rem; height: 1rem; }
}
@media (max-width: 640px) {
  .q-nova { min-height: 300px; }
  .q-nova::after { width: 280px; height: 265px; right: -50px; bottom: -70px; }
  .q-roomy-art { height: 300px; margin: auto -1.4rem 0; width: calc(100% + 2.8rem); }
  .q-app { width: 84px; height: 84px; border-radius: 22px; }
  .q-app svg { width: 42px !important; height: 42px !important; }
}