/* Studio page layout. Tokens and shared components live in base.css. */

.site-header { color: var(--paper); }
.wordmark { font-family: var(--ff-display); font-size: clamp(22px, 2vw, 28px); line-height: 1; letter-spacing: 0.02em; }

.hero { min-height: 100svh; display: flex; align-items: center; padding-top: 140px; }
.hero__grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
.hero h1 { font-size: clamp(56px, 7.6vw, 112px); }
.hero__lede { margin-top: 32px; color: var(--mist); }
.hero__drawing { width: 100%; height: auto; }
.hero__dot { animation: pulse 3.2s ease-in-out infinite; transform-origin: 1440px 690px; }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.35); } }

.hero__more { margin-top: 20px; max-width: 44ch; color: var(--mist); }

.approach__title { max-width: 18ch; }
.approach__body { display: grid; gap: 22px; max-width: 60ch; margin-top: 56px; padding-top: 32px; border-top: 1px solid rgba(63, 92, 122, .3); }

.split { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.split__body { display: grid; gap: 28px; justify-items: start; }
.k-mark--xl { font-size: clamp(120px, 16vw, 220px); color: var(--paper); }

.product { display: grid; grid-template-columns: 160px 1fr; gap: 32px; border-top: 1px solid var(--green); padding-top: 32px; }
.product__meta { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--blue); }
.product__body { display: grid; gap: 18px; justify-items: start; }
.tanode-wordmark { font: 500 clamp(56px, 7vw, 96px)/1 var(--ff-mono); letter-spacing: -0.03em; color: var(--green); }
.product__tagline { font: 400 13px/1.5 var(--ff-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--blue); }
.product .btn { margin-top: 12px; }

.contact__intro { display: grid; gap: 18px; max-width: 56ch; margin-top: 28px; color: var(--mist); }
.contact__list { list-style: none; padding: 0; margin: 40px 0 0; display: grid; gap: 18px; }
.contact__list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px 24px; color: var(--paper); }
.contact__list .mono { width: 110px; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--sage); }
.contact .textlink[aria-disabled] { opacity: .55; text-decoration-style: dashed; }

@media (max-width: 900px) {
  .hero__grid, .split { grid-template-columns: 1fr; }
  .hero__drawing { max-width: 420px; justify-self: end; }
}
@media (max-width: 640px) {
  .nav { display: none; }
  .product { grid-template-columns: 1fr; gap: 12px; }
}