/* StrokeScript, LLC — site styles
   One stylesheet for every page. Matches the Rain Dance Press house style
   (Newsreader / IBM Plex Sans, cream and navy) so the two companies' sites
   read as siblings without sharing a page or a legal entity. */

:root {
  --ink:#14110d; --cream:#f4ecd9; --paper:#fbf7ec; --navy:#1e3a5f;
  --rule:#c9c0ac; --muted:#5c5346; --green:#2f5d43; --sage:#eef1ea; --sage-rule:#c3cdbe;
}
* { box-sizing:border-box; }
html,body { margin:0; padding:0; background:var(--cream); }
body {
  font-family:"Newsreader",Georgia,"Times New Roman",serif;
  color:var(--ink); line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}

/* ---- header / nav ---- */
header { border-bottom:1px solid var(--rule); background:var(--cream); }
.bar { max-width:900px; margin:0 auto; padding:18px 28px;
       display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.bar a.home { text-decoration:none; color:var(--ink); }
.brand { font-size:20px; font-weight:600; letter-spacing:-0.01em; }
nav { font-family:"IBM Plex Sans",system-ui,sans-serif; font-size:14px; display:flex; gap:20px; flex-wrap:wrap; }
nav a { color:var(--muted); text-decoration:none; }
nav a[aria-current] { color:var(--ink); font-weight:600; }
nav a:hover { color:var(--navy); text-decoration:underline; text-underline-offset:0.18em; }

/* ---- layout ---- */
main { max-width:900px; margin:0 auto; padding:64px 28px 40px; }
main.narrow { max-width:760px; }
section { margin:52px 0 0; }
.rule { border:0; border-top:1px solid var(--rule); margin:52px 0 0; }
.hero { max-width:700px; }

/* ---- type ---- */
h1 { font-size:44px; line-height:1.14; margin:0 0 18px; font-weight:600; letter-spacing:-0.02em; }
h2 { font-size:25px; font-weight:600; margin:0 0 12px; letter-spacing:-0.015em; }
h3 { font-size:19px; font-weight:600; margin:0 0 6px; letter-spacing:-0.01em; }
p  { margin:0 0 15px; font-size:17.5px; }
.lede { font-size:21px; color:#2b2519; margin:0 0 18px; }
a { color:var(--navy); text-underline-offset:0.18em; }
ul,ol { margin:0 0 14px; padding-left:22px; font-size:17.5px; }
li { margin:0 0 8px; }
strong { font-weight:600; }
.updated { font-family:"IBM Plex Sans",system-ui,sans-serif; font-size:13px; color:var(--muted); margin:0 0 30px; }
.note { font-family:"IBM Plex Sans",system-ui,sans-serif; font-size:14px; color:var(--muted); }

/* ---- components ---- */
.card { background:var(--paper); border:1px solid var(--rule); border-radius:8px; padding:34px 36px; }
.card.sage { background:var(--sage); border-color:var(--sage-rule); }
.btn { display:inline-block; font-family:"IBM Plex Sans",system-ui,sans-serif; font-size:15px;
       font-weight:500; padding:12px 22px; border-radius:8px; background:var(--navy);
       color:var(--paper); text-decoration:none; margin:0 0 6px; }
.btn:hover { background:#14253a; color:var(--paper); text-decoration:none; }

.tag { display:inline-block; font-family:"IBM Plex Sans",system-ui,sans-serif; font-size:12px;
       letter-spacing:0.06em; text-transform:uppercase; color:var(--green);
       border:1px solid var(--green); border-radius:3px; padding:2px 8px; margin:0 0 14px; }

.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:28px 34px; margin-top:24px; }
.grid p { font-size:16.5px; color:var(--muted); margin:0; }

.shots { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
         gap:1px; margin:24px 0 0; border:1px solid var(--rule); border-radius:8px;
         overflow:hidden; background:var(--rule); }
.shot { background:var(--paper); padding:20px 22px; }
.shot h3 { margin:0 0 4px; font-size:17px; }
.shot p { font-family:"IBM Plex Sans",system-ui,sans-serif; font-size:14px; color:var(--muted); margin:0; line-height:1.55; }

.numbers { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:26px; margin:26px 0 0; }
.num .v { font-size:34px; font-weight:600; letter-spacing:-0.02em; line-height:1.1; display:block; }
.num .k { font-family:"IBM Plex Sans",system-ui,sans-serif; font-size:13px; color:var(--muted); }

dl { margin:18px 0 0; font-family:"IBM Plex Sans",system-ui,sans-serif; font-size:15px; }
dt { font-weight:600; color:var(--muted); margin:14px 0 2px; }
dd { margin:0; }

.tablewrap { overflow-x:auto; margin:18px 0; }
table { border-collapse:collapse; width:100%; font-size:16px; min-width:460px; }
th,td { border:1px solid var(--rule); padding:9px 12px; text-align:left; vertical-align:top; }
th { background:#efe7d4; font-weight:600; }

.qa { margin:26px 0 0; }
.qa h3 { margin:26px 0 4px; }
.qa p { margin:0 0 10px; }

pre.license {
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:12.5px; line-height:1.6; white-space:pre-wrap; word-wrap:break-word;
  background:#f6f1e2; border:1px solid var(--rule); border-radius:6px;
  padding:20px 22px; margin:14px 0 0; color:#2b2519; max-height:none;
}

/* ---- footer ---- */
footer { border-top:1px solid var(--rule); margin-top:60px; }
.foot { max-width:900px; margin:0 auto; padding:28px 28px 64px;
        font-family:"IBM Plex Sans",system-ui,sans-serif; font-size:13px; color:var(--muted);
        display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; }
.foot a { color:var(--muted); }

@media (max-width:600px) {
  h1 { font-size:34px; }
  h2 { font-size:22px; }
  main { padding:44px 22px 30px; }
  .card { padding:26px 22px; }
  .bar { padding:16px 22px; }
  .foot { padding:24px 22px 52px; }
}