/* Updog web site — the brand kit's Stamp system (pitch/brand/README.md): teal / cream / red. Red lives in the lockup's arrow only. */
:root {
  --bg: #0f3d47;    /* teal */
  --ink: #f1e9d8;   /* cream */
  --mid: #9fb8bd;   /* cream, dimmed */
  --acc: #e2452f;   /* red — the arrow; not used by this stylesheet */
}
@font-face {
  font-family: "Oswald";
  src: url("/fonts/Oswald-500.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
html, body { height: 100%; margin: 0; background: var(--bg); color: var(--ink); }
body { font-family: "Oswald", "Liberation Sans Narrow", "Arial Narrow", sans-serif; -webkit-font-smoothing: antialiased; }

.home {
  position: relative;
  box-sizing: border-box;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: clamp(24px, 6vw, 80px);
}

/* the lockup: mark + wordmark + descriptor, one path-only SVG; sits a touch above true center */
.lockup { margin: 0; width: min(760px, 92vw); transform: translateY(-4vh); }
.lockup img { display: block; width: 100%; height: auto; }
.lockup a { display: block; outline-offset: 12px; }

/* the stamp: top-right like the deck cover, stuck on */
.stamp {
  position: absolute;
  top: clamp(18px, 5vw, 64px);
  right: clamp(18px, 5vw, 80px);
  width: clamp(72px, 13vw, 150px);
  height: auto;
  transform: rotate(-3deg);
}

/* the marking strip: lower-left, the container-code voice */
.marking {
  position: absolute;
  left: clamp(18px, 5vw, 80px);
  bottom: clamp(16px, 4vw, 28px);
  margin: 0;
  font-weight: 500;
  font-size: clamp(12px, 1.4vw, 16px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mid);
  white-space: nowrap;
}
.marking a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--mid); }
.marking a:hover, .marking a:focus-visible { border-bottom-color: var(--ink); }
a:focus-visible { outline: 2px solid var(--ink); }

@media (max-height: 420px) { .lockup { transform: none; } }