/* Heron Binder: site styles. Quiet and bookish: one serif (Newsreader), warm
   paper, plenty of white space, hairline rules between sections, each labelled
   in the margin. The picture of the app keeps the app's own system font and colours. */
:root {
  --ink: #1b1d22;
  --ink-soft: #6a6d73;
  --gold: #c9962c;         /* the heron's nib and feet */
  --gold-text: #8a6514;
  --paper: #faf8f5;
  --panel: #f2efea;
  --rule: #e3e0db;
  --field: #ffffff;
  /* The app's window */
  --window: #ffffff; --toolbar: #ececee; --line: #d2d2d7; --row-line: #ececee; --select: #e8ecf7;
  --s-outline: #8e8e93; --s-first: #ff9500; --s-revised: #007aff; --s-final: #af52de; --s-complete: #34c759;
  --serif: "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sys: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
  --frame: 72rem;
  --label: 13rem;
  --measure: 38rem;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ink: #ece9e4; --ink-soft: #a29f9a; --gold: #e0ae3e; --gold-text: #e8b84d;
    --paper: #18171a; --panel: #232226; --rule: #333137; --field: #201f23;
    --window: #232325; --toolbar: #2e2e30; --line: #3a3a3c; --row-line: #2f2f31; --select: #2b3346;
    --s-outline: #98989d; --s-first: #ff9f0a; --s-revised: #0a84ff; --s-final: #bf5af2; --s-complete: #30d158;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 18px/1.6 var(--serif);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--ink); text-decoration-color: var(--gold); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--gold-text); }
.frame { max-width: var(--frame); margin: 0 auto; padding: 0 32px; }

/* Header: the name on the left, a few plain words on the right. */
header.site .frame { display: flex; align-items: center; gap: 10px; padding-top: 22px; padding-bottom: 22px; }
header.site .logo { width: 36px; height: 28px; object-fit: contain; display: block; }
header.site .name { font-size: 1.25rem; font-weight: 500; letter-spacing: -.01em; text-decoration: none; }
header.site nav { margin-left: auto; display: flex; gap: 22px; font-size: 1rem; }
header.site nav a { color: var(--ink-soft); text-decoration: none; }
header.site nav a:hover, header.site nav a[aria-current] { color: var(--ink); }
header.site nav a[aria-current] { text-decoration: underline; text-decoration-color: var(--gold); }

h1, h2, h3 { font-weight: 500; letter-spacing: -.01em; line-height: 1.2; }
h3 { font-size: 1.2rem; margin: 1.6em 0 .3em; }
p, ul, ol { margin: 0 0 1em; }
li { margin: .3em 0; }
kbd { font: .8em var(--mono); background: var(--panel); border: 1px solid var(--rule); border-radius: 4px; padding: 1px 5px; }
.muted, .small { color: var(--ink-soft); }
.small { font-size: .9rem; }

/* The opening line stands where a headline would. */
.opening { padding: 72px 0 16px; margin-left: var(--label); }
.opening .line { font-size: clamp(2.4rem, 5.4vw, 3.6rem); font-weight: 300; line-height: 1.1; letter-spacing: -.02em; margin: 0 0 24px; max-width: 18ch; }
.opening .line em { font-style: italic; }
.opening .tag { font-size: 1.2rem; color: var(--ink-soft); max-width: 32rem; margin: 0 0 28px; }
.opening .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
.badge { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-text); }

/* Sections: a hairline, the label in the margin, the words beside it. */
.sec { display: grid; grid-template-columns: var(--label) minmax(0, 1fr); padding: 36px 0 20px; border-top: 1px solid var(--rule); }
.sec > h2 { font-size: 1rem; font-weight: 400; color: var(--ink-soft); margin: 4px 0 0; letter-spacing: 0; }
.sec > .body { max-width: var(--measure); }
.sec > .body.wide { max-width: none; }
.sec > .body > h3:first-child { margin-top: 0; }
.showcase { margin: 24px 0 64px; }

/* Inner pages: a title, then the same labelled sections. */
.pagehead { padding: 56px 0 28px; margin-left: var(--label); }
.pagehead h1 { font-size: clamp(2.2rem, 4.6vw, 3rem); font-weight: 300; letter-spacing: -.02em; margin: 0 0 10px; }
.pagehead p { color: var(--ink-soft); font-size: 1.15rem; max-width: var(--measure); margin: 0; }

.button {
  display: inline-block; background: var(--ink); color: var(--paper); text-decoration: none; padding: 10px 22px;
  border-radius: 4px; font: 500 1.02rem/1.4 var(--serif); border: 0; cursor: pointer;
}
.button:hover { color: var(--paper); opacity: .86; }
.link-arrow { text-decoration: none; }
.link-arrow::after { content: " →"; color: var(--gold-text); }
.note { border-left: 2px solid var(--gold); padding: 2px 0 2px 16px; color: var(--ink); }

.list { list-style: none; padding: 0; margin: 0; }
.list li { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--rule); margin: 0; }
.list li:first-child { padding-top: 0; }
.list li:last-child { border-bottom: 0; }
.list strong { font-weight: 500; }
.list span { color: var(--ink-soft); }
.uses { color: var(--ink-soft); }

/* Contact form */
form.contact { display: grid; gap: 18px; max-width: 32rem; }
form.contact label { display: grid; gap: 6px; font-size: .95rem; color: var(--ink-soft); }
form.contact input, form.contact select, form.contact textarea {
  font: 400 1.02rem/1.5 var(--serif); color: var(--ink); background: var(--field);
  border: 1px solid var(--rule); border-radius: 4px; padding: 9px 12px; width: 100%;
}
form.contact textarea { min-height: 11rem; resize: vertical; }
form.contact input:focus, form.contact select:focus, form.contact textarea:focus { outline: 2px solid var(--gold); outline-offset: 1px; border-color: transparent; }
form.contact .trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sent { display: none; }
.sent:target, .sent.on { display: block; }

footer.site { border-top: 1px solid var(--rule); margin-top: 48px; padding: 36px 0 48px; color: var(--ink-soft); font-size: .95rem; }
footer.site .frame { display: flex; flex-wrap: wrap; gap: 10px 22px; }
footer.site a { color: var(--ink-soft); text-decoration: none; }
footer.site a:hover { color: var(--ink); }
footer.site .co { margin-left: auto; }

/* A picture of the binder window, built from the app's parts. */
.window {
  background: var(--window); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 24px 60px rgba(40,30,20,.14); overflow: hidden; font: 13px/1.3 var(--sys);
}
.window .bar { display: flex; align-items: center; gap: 14px; background: var(--toolbar); border-bottom: 1px solid var(--line); padding: 8px 12px; }
.window .lights { display: flex; gap: 7px; }
.window .lights i { width: 12px; height: 12px; border-radius: 50%; background: #ff5f57; }
.window .lights i:nth-child(2) { background: #febc2e; }
.window .lights i:nth-child(3) { background: #28c840; }
.window .title { font-weight: 600; }
.window .tools { margin-left: auto; display: flex; gap: 14px; color: var(--ink-soft); font-size: 11px; }
.window .tools img { width: 32px; height: 24px; object-fit: contain; }
.window .head, .window .row { display: grid; grid-template-columns: 1fr 14rem 6.2rem 3.4rem 3.6rem; gap: 10px; align-items: center; padding: 0 12px; }
.window .head { color: var(--ink-soft); font-size: 11px; font-weight: 600; padding-top: 7px; padding-bottom: 7px; border-bottom: 1px solid var(--line); }
.window .row { padding-top: 6px; padding-bottom: 6px; border-bottom: 1px solid var(--row-line); }
.window .row.sel { background: var(--select); }
.window .row .t { display: flex; flex-direction: column; min-width: 0; }
.window .row .t b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.window .row .t small { color: var(--ink-soft); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.window .row.ch .t b::before { content: "▾ "; color: var(--ink-soft); }
.window .row.ch.shut .t b::before { content: "▸ "; }
.window .row.sc .t { padding-left: 18px; }
.window .syn { color: var(--ink-soft); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.window .num { text-align: right; font-variant-numeric: tabular-nums; }
.chip { display: inline-block; color: #fff; font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 999px; white-space: nowrap; }
.chip.outline { background: var(--s-outline); } .chip.first { background: var(--s-first); }
.chip.revised { background: var(--s-revised); } .chip.final { background: var(--s-final); } .chip.complete { background: var(--s-complete); }
.pov { display: inline-flex; width: 20px; height: 20px; border-radius: 50%; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 700; color: #fff; background: #ff3b30; }
.caption { color: var(--ink-soft); font-size: .92rem; margin: 14px 0 0; text-align: center; }
picture { display: contents; }

@media (max-width: 860px) {
  .sec { grid-template-columns: 1fr; padding-top: 28px; }
  .sec > h2 { margin-bottom: 14px; }
  .opening, .pagehead { margin-left: 0; }
  .window .head, .window .row { grid-template-columns: 1fr 6.2rem 3.4rem; }
  .window .syn, .window .head .syn, .window .povc { display: none; }
  .window .tools span { display: none; }
}
@media (max-width: 560px) {
  body { font-size: 17px; }
  .frame { padding: 0 16px; }
  header.site nav { gap: 14px; font-size: .95rem; }
  header.site .name { display: none; }
  .opening { padding-top: 40px; }
  .list li { grid-template-columns: 1fr; gap: 2px; }
  footer.site .co { margin-left: 0; }
}
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
main > .sr-only + .sec { margin-top: 40px; }