/* Direction B «Долина»: a light title screen over the Fantasy valley painting —
   its waterfalls run, mist drifts, the arena's leaves fall, and a sky koi swims centre stage. */
body {
  --bg: var(--paper); --fg: var(--ink); --muted: #555a65; --line: rgba(9, 11, 16, .12);
  --track: rgba(9, 11, 16, .12); --icon: var(--ink); --foot-bg: var(--paper-2);
  --field-line: rgba(9, 11, 16, .2); --field-hover: rgba(9, 11, 16, .44); --field-bg: #fff; --field-bg-hover: #fbfaf6; --error: #b3121a;
  background: var(--bg); color: var(--fg);
}
.top { position: absolute; }
.brand:hover span { color: #6f4b2e; }

/* Hero */
.hero { position: relative; overflow: hidden; isolation: isolate; padding-bottom: var(--s8); }
.band { position: absolute; inset: 0 0 auto; height: 640px; z-index: -1; overflow: hidden; }
.band::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(252, 252, 250, .5), rgba(252, 252, 250, 0) 128px), linear-gradient(180deg, rgba(252, 252, 250, 0) 48%, rgba(252, 252, 250, .7) 78%, var(--paper) 100%); pointer-events: none; }
.title { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 96px; }
.hero-koi { width: 640px; height: 360px; margin-bottom: var(--s4); }
.koi { width: 100%; height: 100%; }
h1 { margin-top: var(--s5); font-size: var(--t128); line-height: 128px; font-weight: 800; letter-spacing: -.045em; text-shadow: 0 0 32px rgba(252, 252, 250, .9); }
.lead { max-width: 640px; margin-top: var(--s5); font-size: var(--t20); line-height: 32px; color: var(--muted); text-wrap: balance; }
.actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s5) var(--s6); margin-top: var(--s7); }
.actions .tlink { font-size: var(--t16); line-height: 24px; }

/* Studio under the painting's own lavender sky, with a floating island from the same world */
.studio { --line: rgba(9, 11, 16, .1); background: linear-gradient(180deg, var(--paper) 0, #eee8f5 42%, #f2eef6 72%, var(--paper) 100%); }
.studio-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s5); align-items: center; }
.studio-text { grid-column: 1 / span 6; }
.studio .studio-head { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--s4); }
.studio .studio-head h2, .studio .studio-lead { grid-column: 1; }
.studio .crafts { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: var(--s7); }
.studio .crafts-item { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: var(--s5); align-items: start; padding: var(--s5) 0; }
.studio .crafts-item:last-child { border-bottom: 1px solid var(--line); }
.studio .crafts-icon { grid-row: span 2; width: 48px; height: 48px; padding: var(--s2); background: var(--peach); }
.studio .crafts h3 { margin-top: 0; font-size: var(--t20); line-height: 28px; }
.studio .crafts p { margin-top: var(--s1); }
.studio-art { grid-column: 7 / span 6; position: relative; display: grid; place-items: center; }
.studio-art::after { content: ""; position: absolute; left: 18%; right: 18%; bottom: -4%; height: 14%; border-radius: 50%; background: radial-gradient(closest-side, rgba(120, 96, 160, .22), rgba(120, 96, 160, 0)); filter: blur(8px); animation: shadow 7s ease-in-out infinite alternate; }
.island { width: 100%; max-width: 560px; height: auto; animation: float 7s ease-in-out infinite alternate; }
@keyframes float { from { transform: translateY(8px) rotate(-.6deg); } to { transform: translateY(-12px) rotate(.6deg); } }
@keyframes shadow { from { transform: scaleX(1.04); opacity: 1; } to { transform: scaleX(.9); opacity: .7; } }

/* Contact: the valley's floating lantern keeps the intro column company */
.contact-art { position: relative; display: grid; justify-items: center; margin-top: var(--s7); }
.lantern { width: 240px; height: auto; animation: float 8s ease-in-out infinite alternate; animation-delay: -3s; }
.contact-art::after { content: ""; position: absolute; bottom: -16px; width: 160px; height: 24px; border-radius: 50%; background: radial-gradient(closest-side, rgba(120, 96, 160, .2), rgba(120, 96, 160, 0)); filter: blur(6px); }

@media (max-width: 1100px) {
  h1 { font-size: var(--t96); line-height: 96px; }
}
@media (max-width: 860px) {
  .studio-text, .studio-art { grid-column: 1 / -1; }
  .contact-art { display: none; }
  .studio-art { order: -1; margin-bottom: var(--s6); }
  .island { max-width: 440px; }
  .band { height: 480px; }
  .title { padding-top: 88px; }
  .hero-koi { width: 512px; height: 288px; }
}
@media (max-width: 640px) {
  .band { height: 400px; }
  .title { padding-top: 80px; }
  .hero-koi { width: 342px; height: 192px; }
  h1 { font-size: var(--t64); line-height: 64px; }
  .lead { font-size: var(--t16); line-height: 24px; }
  .actions { margin-top: var(--s6); }
}
@media (prefers-reduced-motion: reduce) { .island, .lantern, .studio-art::after { animation: none; } }