*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
img, svg { display: block; }

body {
  min-height: 100svh;
  background-color: var(--color-bg);
  /* Dot grid: 3px dots every 48px, centred in each 48px cell (matches the Figma tile). */
  background-image: radial-gradient(circle at center, var(--dot-grid-color) 1.5px, transparent 1.6px);
  background-size: var(--dot-grid-size) var(--dot-grid-size);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; }

.page {
  min-height: 100svh;
  max-width: calc(var(--layout-content-max) + 2 * var(--layout-page-margin));
  margin: 0 auto;
  padding: var(--space-gap-l) var(--layout-page-margin);
  display: grid;
  grid-template-rows: auto 1fr auto;
}

/* Nav */
.wordmark { display: inline-block; }
.wordmark img { height: 36px; width: auto; }

/* Main */
.main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-gap-xl);
}

.content {
  max-width: 800px;
  display: flex;
  flex-direction: column;
  gap: var(--space-gap-m);
}

.eyebrow {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--font-size-mono-label);
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.headline {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--font-size-display);
  line-height: 0.96;
  letter-spacing: -0.04em;
}

.body {
  margin: 0;
  font-size: var(--font-size-body-large);
  line-height: 1.45;
  color: var(--color-text-muted);
}

/* Buttons: local component "Button", direction "mono + diamond" */
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-gap-s);
  padding-top: var(--space-gap-m);
}

.button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: var(--space-gap-s) var(--space-gap-m);
  border: 1px solid var(--color-stroke);
  font-family: var(--font-mono);
  font-size: var(--font-size-mono-label);
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.button__icon { flex: none; }

.button--primary { border-color: var(--color-accent); color: var(--color-accent); }
.button--primary .button__icon { fill: currentColor; }
.button--primary:hover,
.button--primary:focus-visible { background-color: var(--color-accent); color: var(--color-bg); }

.button--secondary { color: var(--color-text-primary); }
.button--secondary .button__icon { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: square; transition: transform 0.2s ease; }
.button--secondary:hover,
.button--secondary:focus-visible { border-color: var(--color-text-primary); }
.button--secondary:hover .button__icon { transform: translate(2px, -2px); }

/* Mark + hand-written note */
.mark-group {
  margin: 0;
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-gap-s);
}

.mark {
  width: 320px;
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.mark svg { width: 100%; height: 100%; overflow: visible; }

.mark__ring { fill: none; stroke: var(--color-accent); stroke-width: 6.087; stroke-linecap: round; }
.mark__diamond { fill: var(--color-accent); }
.mark__stem { fill: var(--color-text-primary); }
.mark__bowl { fill: none; stroke: var(--color-text-primary); stroke-width: 12.174; }

.note {
  font-family: var(--font-hand);
  font-size: var(--font-size-hand-default);
  line-height: 1.3;
  color: var(--color-accent);
  text-align: center;
  transform: rotate(-4deg);
}

/* Footer */
.footer {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-gap-s);
}
.copyright {
  font-family: var(--font-mono);
  font-size: var(--font-size-mono-caption);
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
}
.footer__email {
  font-family: var(--font-mono);
  font-size: var(--font-size-mono-caption);
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  text-decoration: none;
}
.footer__email:hover { color: var(--color-text-primary); }

/* Mark animation (about 1.8s): stem grows, bowl draws, ring travels around from the stem, diamond lands.
   Runs once on load; .is-playing is re-applied by scripts/mark.js on hover or tap. */
.mark__stem { transform-box: fill-box; transform-origin: top; }
.mark__diamond { transform-box: fill-box; transform-origin: center; }
.mark__bowl, .mark__ring { stroke-dasharray: 1; }

.mark.is-playing .mark__stem { animation: stem 0.3s cubic-bezier(0.3, 0, 0.2, 1) both; }
.mark.is-playing .mark__bowl { animation: draw 0.4s 0.3s cubic-bezier(0.4, 0, 0.2, 1) both; }
.mark.is-playing .mark__ring { animation: draw 1s 0.6s cubic-bezier(0.65, 0, 0.35, 1) both; }
.mark.is-playing .mark__diamond { animation: land 0.25s 1.6s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.note.is-hidden { opacity: 0; }
.note { transition: opacity 0.6s ease; }

@keyframes stem { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes land { from { transform: scale(0) rotate(-45deg); } to { transform: scale(1) rotate(0); } }

@media (prefers-reduced-motion: reduce) {
  .mark.is-playing * { animation: none !important; }
  .note { transition: none; }
}

/* Mobile (Web · Mobile) */
@media (max-width: 767px) {
  .page { padding-block: var(--space-gap-l); gap: var(--space-gap-m); }
  .nav { display: flex; justify-content: center; }
  .wordmark img { height: 28px; }
  .main { flex-direction: column; align-items: stretch; justify-content: flex-start; gap: var(--space-gap-l); }
  .mark-group { order: -1; gap: var(--space-gap-xs); }
  .mark { width: 140px; }
  .footer { flex-direction: column; gap: 4px; }
  .footer__email { order: -1; }
}