/* seaLeye.org site styles.
   The project's home, written as a plain README: one column of serif text, one link
   colour, mono for code. No brand chrome on purpose: this page is about the project
   being given away, not sold (DESIGN.md, "seaLeye.org is the project's home").
   The fonts are served from fonts/ with the page, so reading it asks nothing of any
   other site (DESIGN.md, "seaLeye.org serves its own fonts, and its version is read").
   Both are under the SIL Open Font License; fonts/OFL-*.txt. Latin only. */

@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url(fonts/source-serif-4-latin-opsz-normal.woff2) format("woff2");
}
@font-face {
  font-family: "Source Serif 4";
  font-style: italic;
  font-weight: 200 900;
  font-display: swap;
  src: url(fonts/source-serif-4-latin-opsz-italic.woff2) format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2");
}

:root {
  --ground: #ffffff;
  --ink: #1b1b1b;
  --muted: #5e5e5e;
  --rule: #d9d9d9;
  --code-bg: #f5f5f4;
  --code-edge: #e3e3e1;
  --link: #0b4fc4;
  --link-hover: #082f75;
  --works: #2f6b3a;
  --not-yet: #8a4b0f;
  --serif: "Source Serif 4", Georgia, serif;
  --mono: "IBM Plex Mono", Menlo, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground: #151617;
    --ink: #e6e6e3;
    --muted: #a3a3a0;
    --rule: #34363a;
    --code-bg: #1e2022;
    --code-edge: #303236;
    --link: #8ab4ff;
    --link-hover: #c2d6ff;
    --works: #8fcf9a;
    --not-yet: #e6b47a;
  }
}

* { box-sizing: border-box; }

html { background: var(--ground); }

body {
  margin: 0;
  padding: 72px 16px 96px;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.6;
}

main { max-width: 680px; margin: 0 auto; }

a { color: var(--link); text-underline-offset: 3px; }
a:hover, a:focus-visible { color: var(--link-hover); }

header { padding-bottom: 28px; border-bottom: 1px solid var(--rule); }
h1 { margin: 0 0 6px; font-size: 40px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; }
.subtitle { margin: 0; font-style: italic; color: var(--muted); }
header nav { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 18px; font-family: var(--mono); font-size: 14px; }

dl.facts {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 6px 24px;
  margin: 28px 0 8px;
  font-size: 16px;
}
dl.facts dt { color: var(--muted); }
dl.facts dd { margin: 0; }

h2 { font-size: 22px; font-weight: 600; margin: 40px 0 10px; line-height: 1.3; }
p { margin: 0 0 16px; }

pre {
  margin: 0 0 16px;
  padding: 16px 18px;
  background: var(--code-bg);
  border: 1px solid var(--code-edge);
  border-radius: 4px;
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.6;
  overflow-x: auto;
}
code { font-family: var(--mono); font-size: 0.85em; }

.status { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; font-size: 17px; }
.status h3 {
  margin: 0 0 8px;
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.status .works h3 { color: var(--works); }
.status .not-yet h3 { color: var(--not-yet); }
.status ul { margin: 0; padding-left: 20px; }
.status li { margin-bottom: 6px; }

.signature { font-style: italic; }

footer {
  margin-top: 40px;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 14px;
  color: var(--muted);
}

@media (max-width: 560px) {
  body { padding-top: 48px; font-size: 18px; }
  h1 { font-size: 34px; }
  .status { grid-template-columns: minmax(0, 1fr); }
  dl.facts { grid-template-columns: minmax(0, 1fr); gap: 0; }
  dl.facts dd { margin-bottom: 8px; }
}