/* ChemLib — shared site styles */

:root{
  --bg:#fafafa; --bg2:#ffffff; --bg3:#f3f4f6;
  --border:#e5e7eb;
  --text:#111827; --text2:#4b5563; --text3:#9ca3af;
  --accent:#6a8fbf; --accent-hover:#4f739f;
  --sans: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, "Cascadia Code", "Courier New", monospace;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg2); color:var(--text); font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent-hover); text-decoration:underline; text-decoration-color:var(--border)}
a:hover{text-decoration-color:currentColor}
::selection{background:#dbe6f2}

.wrap{max-width:640px; margin:0 auto; padding:0 24px}

/* header */
header{border-bottom:1px solid var(--border)}
.header-row{
  display:flex; align-items:baseline; justify-content:space-between;
  padding:22px 0; gap:16px; flex-wrap:wrap;
}
.brand{font-weight:700; font-size:16px; letter-spacing:-.01em; text-decoration:none; color:var(--text)}
nav{display:flex; gap:22px; font-size:14px}
nav a{text-decoration:none; color:var(--text2)}
nav a:hover{color:var(--accent-hover)}
nav a[aria-current="page"]{color:var(--text); font-weight:600}

/* generic section rhythm */
main section{padding:56px 0}
main section + section{border-top:1px solid var(--border)}
.tint{background:var(--bg3)}

h1{font-size:32px; line-height:1.25; font-weight:700; letter-spacing:-.01em; margin:0 0 16px; max-width:22ch}
h2{font-size:20px; font-weight:700; letter-spacing:-.01em; margin:0 0 12px}
p{font-size:16px; line-height:1.65; color:var(--text2); margin:0 0 16px; max-width:56ch}
p:last-child{margin-bottom:0}
.lede{font-size:18px; color:var(--text)}

.label{
  font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--text3); display:block; margin:0 0 10px;
}

.links{display:flex; gap:20px; margin-top:22px; font-size:15px}

ul.plain{list-style:none; margin:0; padding:0}
ul.plain li{
  padding:16px 0; border-top:1px solid var(--border);
  display:flex; gap:18px; align-items:baseline;
}
ul.plain li:last-child{border-bottom:1px solid var(--border)}
ul.plain .name{font-weight:600; font-size:15px; width:150px; flex-shrink:0}
ul.plain .desc{font-size:14.5px; color:var(--text2); line-height:1.55; margin:0}

footer{border-top:1px solid var(--border)}
.footer-row{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px;
  padding:24px 0; font-size:13px; color:var(--text3);
}
.footer-row a{color:var(--text3); text-decoration:none}
.footer-row a:hover{color:var(--accent-hover)}

@media (max-width:520px){
  h1{font-size:26px}
  ul.plain li{flex-direction:column; gap:4px}
  ul.plain .name{width:auto}
}