/* One stylesheet for every page, so a change to the look is one edit.
   Extracted from index.html when the second page arrived. */
:root { color-scheme: light dark; --ink:#1b1b1f; --dim:#5b5b66; --bg:#fbfaf8; --line:#e6e3dd; --accent:#2f6f5e; }
@media (prefers-color-scheme: dark) {
  :root { --ink:#eceaf2; --dim:#a2a0ad; --bg:#17171b; --line:#2e2e36; --accent:#7fc0ab; }
}
* { box-sizing: border-box; }
body {
  margin:0; background:var(--bg); color:var(--ink);
  font:16px/1.65 ui-sans-serif, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing:antialiased;
}
.wrap { max-width:44rem; margin:0 auto; padding:clamp(2rem,7vw,5rem) 1.25rem 4rem; }
h1 { font-size:clamp(2rem,6vw,2.75rem); line-height:1.15; letter-spacing:-0.02em; margin:0 0 .4em; }
h2 { font-size:1.05rem; letter-spacing:.06em; text-transform:uppercase; color:var(--dim);
     margin:2.75rem 0 .75rem; font-weight:600; }
p { margin:0 0 1.1em; }
.lede { font-size:clamp(1.05rem,2.6vw,1.2rem); color:var(--dim); }
ul { margin:0 0 1.1em; padding-left:1.15rem; }
li { margin-bottom:.5em; }
a { color:var(--accent); }

/* The bar every page carries. Wraps rather than scrolls on a narrow screen:
   a director opening this on a phone between rooms is the common case. */
.bar { display:flex; flex-wrap:wrap; align-items:baseline; gap:1rem 1.25rem; margin-bottom:2.5rem; }
.mark { font-weight:700; letter-spacing:-0.03em; font-size:1.1rem; color:var(--accent);
        text-decoration:none; }
.bar nav { display:flex; flex-wrap:wrap; gap:1rem; font-size:.95rem; }
.bar nav a[aria-current="page"] { color:var(--dim); text-decoration:none; }
.bar .spacer { flex:1 1 auto; }
.signin { border:1px solid var(--accent); border-radius:.4rem; padding:.3rem .85rem;
          text-decoration:none; font-size:.95rem; white-space:nowrap; }

footer { margin-top:3.5rem; padding-top:1.5rem; border-top:1px solid var(--line);
         color:var(--dim); font-size:.9rem; }