/* Deployy — shared styles for index.html and docs.html.
   System fonts only; the site makes no third-party requests. */

:root {
  --bg:       #0a0b0b;
  --bg-2:     #101212;
  --bg-3:     #151817;
  --edge:     #242827;
  --edge-2:   #333937;
  --ink:      #ece9e3;
  --dim:      #979c98;
  --dim-2:    #6d7371;
  --teal:     #12a594;
  --teal-lt:  #6fd6c4;
  --sand:     #d3a15e;
  --on-teal:  #04211d;
  --code-ink: #d5d9d5;

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "Cascadia Mono", Consolas, "SF Mono", ui-monospace, Menlo, monospace;
}

/* base */

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { display: block; width: 100%; height: auto; }
strong { color: var(--ink); font-weight: 500; }
em { font-style: italic; color: var(--ink); }

h1, h2, h3 { font-family: var(--serif); font-weight: 400; letter-spacing: 0; }
h1 { font-size: clamp(35px, 5.4vw, 58px); line-height: 1.06; }
h2 { font-size: clamp(27px, 3.6vw, 38px); line-height: 1.14; }

.wrap { width: 100%; max-width: 1040px; margin: 0 auto; padding: 0 28px; }

/* the numbered rule above each section, and in prose */

.label {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--dim-2);
}
.label .n { color: var(--sand); }
.label::after { content: ""; flex: 1; height: 1px; background: var(--edge); }

.link, article a { color: var(--teal-lt); border-bottom: 1px solid var(--edge-2); }

/* logo */

.mark { width: 34px; height: 34px; flex: none; }

/* nav */

header.nav { border-bottom: 1px solid var(--edge); background: var(--bg); }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.brand { display: flex; align-items: center; gap: 11px; font-size: 19px; letter-spacing: .01em; }
.brand b { font-weight: 600; }
.nav-links { display: flex; align-items: center; gap: 26px; font-size: 14.5px; color: var(--dim); }
.nav-links a:hover { color: var(--ink); }
.nav-links .mailto { font-family: var(--mono); font-size: 13px; }

/* buttons */

.btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 12px 22px; border: 1px solid transparent; border-radius: 4px;
  font-size: 15px; font-weight: 500; cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s;
}
.btn-primary { background: var(--teal); color: var(--on-teal); font-weight: 600; }
.btn-primary:hover { background: var(--teal-lt); }
.btn-line { border-color: var(--edge-2); color: var(--ink); }
.btn-line:hover { border-color: var(--dim); background: var(--bg-2); }
.arrow { font-family: var(--mono); }

/* callouts — .tip is the sand-flagged variant */

.note {
  margin-top: 22px; padding: 18px 22px;
  background: var(--bg-2);
  border: 1px solid var(--edge);
  border-left: 2px solid var(--edge-2);
  border-radius: 0 5px 5px 0;
  color: var(--dim); font-size: 15.5px;
}
.note.tip { border-left-color: var(--sand); }
.note h4 {
  margin-bottom: 8px;
  font-family: var(--mono); font-size: 11.5px; font-weight: 400;
  letter-spacing: .14em; text-transform: uppercase; color: var(--sand);
}
.note p { margin: 0; max-width: 68ch; font-size: inherit; color: inherit; }
.note table { margin-top: 16px; font-size: 14.5px; }

/* footer */

footer { border-top: 1px solid var(--edge); padding: 44px 0; color: var(--dim-2); font-size: 14px; }
footer .wrap { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
footer .fbrand { display: flex; align-items: center; gap: 11px; color: var(--ink); font-size: 17px; }
footer .mark { width: 28px; height: 28px; }
footer .links { display: flex; gap: 22px; font-family: var(--mono); font-size: 12.5px; letter-spacing: .04em; }
footer .links a:hover { color: var(--ink); }
.tiny { margin-top: 9px; font-family: var(--mono); font-size: 11.5px; color: var(--dim-2); letter-spacing: .04em; }


/* ============ home ============ */

.hero { padding: 84px 0 78px; overflow: hidden; }
.hero .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 60px; align-items: center;
}
.hero h1 { margin-top: 26px; max-width: 18ch; }
.hero .lead { margin-top: 22px; max-width: 46ch; font-size: 17.5px; color: var(--dim); }
.hero .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero .meta {
  margin-top: 20px;
  font-family: var(--mono); font-size: 12.5px; letter-spacing: .02em; color: var(--dim-2);
}

/* the screenshot runs off the right edge instead of sitting in a centred card */
.shot-bleed {
  margin-right: -160px;
  background: var(--bg-2);
  border: 1px solid var(--edge); border-right: none;
  border-radius: 6px 0 0 6px;
  overflow: hidden;
}

section.block { padding: 74px 0; border-top: 1px solid var(--edge); }
.block h2 { margin-top: 18px; max-width: 26ch; }
.prose { margin-top: 18px; max-width: 62ch; font-size: 17px; color: var(--dim); }
.prose + .prose { margin-top: 14px; }

.specs { margin-top: 44px; border-top: 1px solid var(--edge); }
.spec {
  display: grid; grid-template-columns: 200px 1fr; gap: 40px;
  padding: 24px 0; border-bottom: 1px solid var(--edge);
}
.spec dt {
  padding-top: 3px;
  font-family: var(--mono); font-size: 12.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--teal-lt);
}
.spec dd { max-width: 60ch; font-size: 16.5px; color: var(--dim); }

figure { margin-top: 40px; }
figure .frame { background: var(--bg-2); border: 1px solid var(--edge); border-radius: 6px; overflow: hidden; }
figcaption {
  margin-top: 12px;
  font-family: var(--mono); font-size: 12px; letter-spacing: .02em; color: var(--dim-2);
}
.two-up { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; margin-top: 44px; }
.two-up figure { margin-top: 0; }

.pullquote { margin-top: 34px; padding: 4px 0 4px 26px; border-left: 2px solid var(--sand); }
.pullquote p { max-width: 56ch; font-family: var(--serif); font-size: 19px; line-height: 1.6; color: var(--ink); }
.pullquote p + p { margin-top: 14px; }
.signoff {
  margin-top: 18px;
  font-family: var(--mono); font-size: 12.5px; letter-spacing: .04em; color: var(--dim-2);
}
.signoff + .prose { margin-top: 30px; }
.closing-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 30px; }


/* ============ docs ============ */

.pagehead { padding: 66px 0 40px; border-bottom: 1px solid var(--edge); }
.pagehead h1 { margin-top: 24px; max-width: 24ch; font-size: clamp(31px, 4.6vw, 46px); line-height: 1.1; }
.pagehead p { margin-top: 18px; max-width: 62ch; font-size: 17.5px; color: var(--dim); }

.doc {
  display: grid; grid-template-columns: 210px 1fr; gap: 56px;
  padding: 44px 0 24px; align-items: start;
}
.toc { position: sticky; top: 32px; font-size: 14.5px; }
.toc h4 {
  margin-bottom: 14px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--dim-2);
}
.toc a { display: block; padding: 6px 0 6px 14px; border-left: 1px solid var(--edge); color: var(--dim); }
.toc a:hover { color: var(--ink); border-left-color: var(--teal); }

article section { padding: 26px 0 40px; border-bottom: 1px solid var(--edge); }
article section:last-child { border-bottom: none; }
article h2 { margin: 6px 0 4px; font-size: 27px; }
article h3 {
  margin: 32px 0 6px;
  font-family: var(--sans); font-size: 15px; font-weight: 600;
  letter-spacing: .01em; color: var(--ink);
}
article p { margin-top: 13px; max-width: 70ch; font-size: 16.5px; color: var(--dim); }
article ul, article ol { margin: 13px 0 0 20px; max-width: 70ch; font-size: 16.5px; color: var(--dim); }
article li { margin: 7px 0; }
article li::marker { color: var(--dim-2); }

code {
  padding: 1.5px 6px;
  background: var(--bg-3); border: 1px solid var(--edge); border-radius: 3px;
  font-family: var(--mono); font-size: 13px; color: var(--teal-lt);
}
pre {
  margin-top: 18px; padding: 20px 22px;
  background: var(--bg-2);
  border: 1px solid var(--edge);
  border-left: 2px solid var(--edge-2);
  border-radius: 0 5px 5px 0;
  overflow-x: auto;
}
pre code {
  display: block;
  padding: 0; background: none; border: none;
  font-size: 13px; line-height: 1.75; color: var(--code-ink);
}

table { width: 100%; border-collapse: collapse; margin-top: 20px; font-size: 15.5px; }
th, td { padding: 12px 14px 12px 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--edge); }
th {
  padding-bottom: 10px;
  font-family: var(--mono); font-size: 11px; font-weight: 400;
  letter-spacing: .14em; text-transform: uppercase; color: var(--dim-2);
}
td { color: var(--dim); }
td code { white-space: nowrap; }


/* ============ narrow ============ */

@media (max-width: 900px) {
  section.block { padding: 56px 0; }
  .nav-links .hide-sm { display: none; }

  .hero { padding: 60px 0 56px; }
  .hero .wrap { grid-template-columns: 1fr; gap: 40px; }
  .hero h1 { max-width: 22ch; }
  .shot-bleed { margin-right: -28px; }
  .spec { grid-template-columns: 1fr; gap: 8px; }
  .two-up { grid-template-columns: 1fr; }

  .pagehead { padding: 48px 0 32px; }
  .doc { grid-template-columns: 1fr; gap: 0; padding-top: 28px; }
  .toc { display: none; }
}