/* Damagement landing page demo - shared styles for the three candidates */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Inter:wght@400;500&display=swap');

:root {
  --cream: #f3eee2;
  --ink: #141210;
  --yellow: #f5c400;
  --black: #090909;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  height: 100dvh;
  overflow: hidden;
  font-family: 'Inter', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.page {
  height: 100dvh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  padding: clamp(16px, 4vw, 56px);
  gap: clamp(16px, 4vw, 56px);
}
.art {
  height: calc(100dvh - 2 * clamp(16px, 4vw, 56px));
  display: flex; align-items: center; justify-content: center;
}
.art img {
  max-height: 100%; max-width: 100%;
  object-fit: contain;
  display: block;
}
.copy { max-width: 34rem; }
.kicker {
  font-size: clamp(11px, 1vw, 13px);
  letter-spacing: .32em; text-transform: uppercase;
  opacity: .62; margin-bottom: 1.2em;
}
h1 {
  font-family: 'Anton', Impact, sans-serif;
  font-weight: 400;
  font-size: clamp(56px, 8.5vw, 132px);
  line-height: .92;
  letter-spacing: .01em;
  text-transform: uppercase;
  margin-bottom: .22em;
}
.line {
  font-size: clamp(18px, 2vw, 27px);
  line-height: 1.35;
  max-width: 22ch;
}
.line em { font-style: normal; opacity: .62; display: block; margin-top: .35em; }
.foot {
  margin-top: clamp(20px, 3.5vw, 48px);
  font-size: clamp(13px, 1.05vw, 15px);
  letter-spacing: .06em;
  opacity: .62;
}
.foot a { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; }

/* demo-only switcher, bottom right */
.switch {
  position: fixed; right: 14px; bottom: 12px;
  display: flex; gap: 6px; font-size: 12px; letter-spacing: .1em;
  opacity: .55;
}
.switch a {
  color: inherit; text-decoration: none;
  border: 1px solid currentColor; border-radius: 999px;
  padding: 4px 10px;
}
.switch a.on { background: currentColor; }
.switch a.on span { color: var(--bg, #fff); }

@media (max-width: 760px), (max-aspect-ratio: 1/1) {
  .page {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr) auto;
    align-content: center;
    text-align: center;
    gap: 12px;
  }
  .art { height: auto; min-height: 0; }
  .art img { max-height: 48dvh; }
  .copy { margin: 0 auto; }
  .line { margin: 0 auto; }
  h1 { font-size: clamp(48px, 15vw, 96px); }
}