/* The public site on the Nameplate design system (design/README.md). Every
   value comes from tokens.css; web_test.go fails on raw colors, shadows,
   gradients, rounded corners and dark mode. */

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--surface); }
body { color: var(--ink); font-family: var(--font-sans); }
p, h1 { margin: 0; }
:focus-visible { outline: var(--stroke-focus) solid var(--focus-ring); outline-offset: var(--stroke-focus); }

/* The wordmark artwork alone. */
.masthead { max-width: var(--content-max); margin: 0 auto; padding: var(--space-6) var(--space-8); }
.wordmark { display: block; height: 28px; width: auto; }

/* Each statement is a plate: a mono tag in the left column, one sentence in the right. */
.plate { max-width: var(--content-max); margin: 0 auto; padding: var(--space-9) var(--space-8); display: grid; grid-template-columns: 160px 1fr; column-gap: var(--space-6); align-items: start; }
.plate + .plate { border-top: var(--stroke-hairline) solid var(--line); }
.tag { text-transform: uppercase; color: var(--ink-muted); padding-top: var(--space-3); }
.statement { max-width: 14em; }
.turn { color: var(--accent); }

/* The vision fills the first screen and sits on its floor. */
.vision { min-height: calc(100vh - 92px); align-content: end; padding-top: var(--space-10); }
.contact { padding-bottom: var(--space-10); }
.mission .statement { max-width: 18em; }

/* One address, in ink; vermilion on hover is the section's accent. */
.mail { color: var(--ink); text-decoration: none; justify-self: start; }
.mail:hover { color: var(--accent-text); }
.arrow { font-family: var(--font-mono); font-weight: 400; }

@media (max-width: 720px) {
  .masthead { padding: var(--space-5) var(--space-4); }
  .wordmark { height: 22px; }
  .plate { grid-template-columns: 1fr; row-gap: var(--space-5); padding: var(--space-8) var(--space-4); }
  .vision { min-height: calc(100svh - 70px); }
  .tag { padding-top: 0; }
  .t-display-xl { font-size: 44px; }
  .t-display { font-size: 34px; }
}