@font-face {
  font-family: 'Michroma';
  src: url('fonts/Michroma-Regular.ttf') format('truetype');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
:root { color-scheme: dark; background: #000000; }
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #000000; }
body { position: relative; min-height: 100svh; font-family: 'Michroma', sans-serif; }
.hero { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.identity { display: flex; flex-direction: column; align-items: center; width: 100%; transform: translateY(-2vh); }
.logo-stage {
  --charge: 0;
  width: min(76vw, 1200px, 109vh);
  aspect-ratio: 3 / 2;
  position: relative;
  pointer-events: auto;
  touch-action: none;
  cursor: grab;
  isolation: isolate;
}
.logo-stage:active { cursor: grabbing; }
.logo-fallback { display: block; width: 100%; height: 100%; object-fit: contain; transition: opacity .3s ease; animation: fallback-float 13s ease-in-out infinite; }
#logo-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; display: block; opacity: 0; transition: opacity .5s ease; }
.webgl-ready #logo-canvas { opacity: 1; }
.webgl-ready .logo-fallback { opacity: 0; animation: none; }
@keyframes fallback-float {
  0%, 100% { transform: translateY(-7px) rotate(-.35deg); }
  50% { transform: translateY(7px) rotate(.35deg); }
}
h1 {
  font-family: 'Michroma', sans-serif;
  font-size: clamp(24px, 2.24vw, 36px);
  font-weight: 400; line-height: 1.8;
  letter-spacing: .43em; text-indent: .43em;
  margin: -18px 0 0; white-space: nowrap;
  background: linear-gradient(112deg, #8e7251 0%, #ceb691 23%, #fff0d5 44%, #ac8f60 58%, #eed7b4 76%, #ad8e61 100%);
  background-clip: text; -webkit-background-clip: text; color: transparent;
  filter: drop-shadow(0 0 10px rgba(211,174,111,.14));
  will-change: transform;
}
@media (max-width: 700px) {
  .identity { transform: translateY(-3vh); }
  .logo-stage { width: min(124vw, 96vh); }
  h1 { font-size: clamp(18px, 4.7vw, 24px); letter-spacing: .30em; text-indent: .30em; margin-top: 12px; }
}
@media (max-height: 560px) and (orientation: landscape) {
  .identity { transform: translateY(-2vh); }
  .logo-stage { width: min(65vw, 108vh); }
  h1 { font-size: 18px; letter-spacing: .40em; text-indent: .40em; margin-top: -12px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  h1 { transform: none !important; }
}