:root {
  --paper: #F6F4F1;
  --essential: #BBB8B5;
  --camel: #8F7258;
  --cocoa: #311B14;
  --black: #1A1713;

  --bg: var(--paper);
  --logo: var(--cocoa);
  --status: var(--cocoa);
  --link: var(--cocoa);
  --link-hover: var(--camel);
  --footer: var(--essential);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: var(--cocoa);
    --logo: var(--paper);
    --status: var(--essential);
    --link: var(--paper);
    --link-hover: var(--camel);
    --footer: var(--essential);
  }
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--bg);
  color: var(--logo);
  font-family: "DM Sans", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100svh;
  padding: 1.5rem;
  transition: background-color 0.25s ease, color 0.25s ease;
}

main {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  width: 100%;
  max-width: 800px;
}

.logo-wrap {
  width: min(720px, 92vw);
  aspect-ratio: 670 / 295;
  display: flex;
  align-items: center;
  justify-content: center;
}

.signature {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.signature path {
  fill: none;
  stroke: var(--logo);
  stroke-width: 3.5px;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 5000;
  stroke-dashoffset: 5000;
  animation: draw 2.8s cubic-bezier(0.4, 0, 0.2, 1) 0.2s forwards;
  transition: stroke 0.25s ease;
}

@keyframes draw {
  to { stroke-dashoffset: 0; }
}

.status {
  font-family: "Oswald", sans-serif;
  font-weight: 300;
  font-size: clamp(0.85rem, 1.6vw, 1.02rem);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--status);
  opacity: 0;
  animation: fadeIn 1s ease 2.4s forwards;
  transition: color 0.25s ease;
}

.ig {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: "DM Sans", sans-serif;
  font-weight: 400;
  font-size: 1.02rem;
  color: var(--link);
  text-decoration: none;
  letter-spacing: 0.02em;
  opacity: 0;
  animation: fadeIn 1s ease 2.9s forwards;
  transition: color 0.25s ease;
}

.ig-icon {
  width: 1.1em;
  height: 1.1em;
  flex-shrink: 0;
  display: block;
}

.ig:hover { color: var(--link-hover); }

.mail {
  position: absolute;
  top: max(1.25rem, env(safe-area-inset-top));
  right: max(1.25rem, env(safe-area-inset-right));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  color: var(--logo);
  opacity: 0;
  animation: fadeIn 1s ease 3.1s forwards;
  transition: color 0.25s ease, transform 0.2s ease;
}

.mail svg {
  width: 100%;
  height: 100%;
  display: block;
}

.mail:hover { color: var(--link-hover); transform: translateY(-1px); }

footer {
  position: fixed;
  bottom: 1.25rem;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--footer);
  opacity: 0;
  animation: fadeIn 1s ease 3.4s forwards;
  transition: color 0.25s ease;
}

@keyframes fadeIn {
  to { opacity: 1; }
}

@media (min-width: 900px) {
  main {
    max-width: 1300px;
    gap: 1.25rem;
  }

  .logo-wrap {
    width: min(1200px, 75vw);
  }
}

@media (prefers-reduced-motion: reduce) {
  .signature path { animation: none; stroke-dashoffset: 0; }
  .status, .ig, .mail, footer { animation: none; opacity: 1; }
}