/* Hand-written reset, type, layout and forms. No CSS framework. */

:root {
  color-scheme: light;
  --ink: #1a1d21;
  --muted: #5c6770;
  --paper: #eef3f7;
  --surface: #fff;
  --line: #d5e0e8;
  --link: #1f84ce;
  --brand: #1f84ce;
  --brand-dark: #145587;
  --radius: 10px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.6 "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

button, input, select, textarea { font: inherit; }

button { cursor: pointer; }

a { color: var(--link); }

img { max-width: 100%; height: auto; }

h1, h2, h3, h4 { margin: 0 0 .75rem; line-height: 1.25; font-weight: 650; }

p { margin: 0 0 1rem; }

.wrap {
  width: min(1080px, calc(100% - 2rem));
  margin-inline: auto;
}

label { display: block; margin-bottom: .25rem; }

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
textarea,
select {
  width: 100%;
  padding: .5rem .7rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: inherit;
}

:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }