/* InkSonics static pages (collections + patterns). Tokens match index.html. */
:root{
  --paper:#FFFFFF;--leaf:#F6F3F2;--ink:#1F2933;--quiet:#66636A;--rule:#DCD6D5;--rule-soft:#ECE7E6;
  --crimson:#9F041B;--crimson-wash:#F4E6E8;--on-crimson:#FFFFFF;
  --display:'Fraunces',Georgia,'Times New Roman',serif;
  --body:'Archivo',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --dim:'Archivo Narrow','Archivo','Arial Narrow',sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#16171A;--leaf:#1F2125;--ink:#ECE8E4;--quiet:#A9A3A6;--rule:#3A3A40;--rule-soft:#2A2B30;
  --crimson:#E58C97;--crimson-wash:#3A1D22;--on-crimson:#16171A;color-scheme:dark}}
:root[data-theme="dark"]{
  --paper:#16171A;--leaf:#1F2125;--ink:#ECE8E4;--quiet:#A9A3A6;--rule:#3A3A40;--rule-soft:#2A2B30;
  --crimson:#E58C97;--crimson-wash:#3A1D22;--on-crimson:#16171A;color-scheme:dark}

*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.55}
a{color:inherit}
a:hover{color:var(--crimson)}
:focus-visible{outline:2px solid var(--crimson);outline-offset:2px}
img{max-width:100%;height:auto;display:block}
.wrap{max-width:1240px;margin:0 auto;padding-inline:24px}
@media (max-width:560px){.wrap{padding-inline:16px}}
h1,h2,h3{font-family:var(--display);font-weight:400;text-wrap:balance;margin:0}
h1{font-size:clamp(34px,5vw,56px);line-height:1.06;letter-spacing:-.015em}
h2{font-size:26px;line-height:1.2;margin-bottom:14px}
h3{font-size:21px;line-height:1.25}
.eyebrow{font-family:var(--dim);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--crimson);margin:0 0 10px}
.muted{color:var(--quiet)}
.small{font-size:14px}
.reg{font-size:.36em;vertical-align:top;position:relative;top:.14em;margin-left:.04em}

/* header */
.top{position:sticky;top:0;z-index:5;background:var(--paper);border-bottom:1px solid var(--rule)}
.top .wrap{display:flex;align-items:center;gap:24px;min-height:68px;flex-wrap:wrap}
.brand{display:flex;flex-direction:column;text-decoration:none;line-height:1}
.brand b{font-family:var(--display);font-weight:400;font-size:28px;letter-spacing:-.015em}
.brand i{font-style:normal;font-family:var(--dim);font-weight:500;font-size:9.5px;letter-spacing:.22em;color:var(--crimson);margin-top:5px}
.top nav{display:flex;gap:20px;margin-left:auto;font-family:var(--dim);font-size:13px;letter-spacing:.1em;text-transform:uppercase}
.top nav a{text-decoration:none}
@media (max-width:560px){.top nav{margin-left:0;gap:14px;padding-bottom:10px;width:100%}}

/* page head */
.crumbs{font-family:var(--dim);font-size:13px;color:var(--quiet);margin:22px 0 18px}
.crumbs a{text-decoration:none}
.phead{margin-bottom:26px}
.phead .sub{font-family:var(--dim);color:var(--quiet);letter-spacing:.04em;margin:8px 0 0}
.lede{font-size:18px;max-width:68ch;margin:14px 0 0}
.actions{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0 0}
.btn{display:inline-block;padding:10px 16px;border:1px solid var(--ink);border-radius:2px;text-decoration:none;font-family:var(--dim);font-size:14px;letter-spacing:.04em}
.btn.solid{background:var(--crimson);border-color:var(--crimson);color:var(--on-crimson)}
.btn.solid:hover{color:var(--on-crimson);filter:brightness(1.08)}

/* pattern page */
.pgrid{display:grid;grid-template-columns:minmax(0,2fr) minmax(260px,1fr);gap:28px;align-items:start}
@media (max-width:860px){.pgrid{grid-template-columns:1fr}}
.hero{margin:0}
.hero img{width:100%;border:1px solid var(--rule-soft)}
.hero figcaption{font-family:var(--dim);font-size:13px;color:var(--quiet);margin-top:8px}
.cta{background:var(--leaf);border:1px solid var(--rule-soft);padding:20px;display:flex;flex-direction:column;gap:12px}
.cta .btn{text-align:center}
.cta p{margin:0}
section{margin-top:44px}
section p{max-width:72ch}
.kv{margin:12px 0 0;display:grid;gap:6px}
.kv div{display:grid;grid-template-columns:110px 1fr;gap:10px;font-size:14px}
.kv dt{font-family:var(--dim);color:var(--quiet);text-transform:uppercase;letter-spacing:.08em;font-size:12px;padding-top:2px}
.kv dd{margin:0;overflow-wrap:anywhere}
code{font-size:12.5px}
.prods{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}
.prod{border:1px solid var(--rule);padding:18px}
.prod h3 small{font-family:var(--dim);font-size:13px;color:var(--quiet);margin-left:6px}
.prod p{font-size:14.5px}
.ways{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px 18px;font-size:14.5px}
.ways li{display:flex;align-items:center;gap:10px}
.chip{width:22px;height:22px;border:1px solid var(--rule);flex:none}
.dots{display:inline-flex;flex:none}
.dots i{width:14px;height:22px;border:1px solid var(--rule);margin-right:-1px}
details{margin-top:14px}
summary{cursor:pointer;font-family:var(--dim);letter-spacing:.06em;margin-bottom:10px}
.pn{display:flex;justify-content:space-between;gap:16px;margin:48px 0 0;padding-top:18px;border-top:1px solid var(--rule);font-family:var(--dim)}
.pn a{text-decoration:none}

/* tiles */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px}
.ptile{text-decoration:none;display:block}
.ptile img{width:100%;aspect-ratio:4/3;object-fit:cover;border:1px solid var(--rule-soft)}
.ptile .lab{display:flex;flex-direction:column;margin-top:8px}
.ptile small{font-family:var(--dim);color:var(--quiet);font-size:12.5px}
.cgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:24px}
.ccard{text-decoration:none;display:block}
.ccard img{width:100%;aspect-ratio:4/3;object-fit:cover;border:1px solid var(--rule-soft)}
.ccard span{display:flex;flex-direction:column;margin-top:10px}
.ccard small{font-family:var(--dim);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--crimson)}
.ccard b{font-family:var(--display);font-weight:400;font-size:24px}
.ccard em{font-style:normal;color:var(--quiet);font-size:14px}

/* footer */
footer{margin-top:70px;border-top:1px solid var(--rule);background:var(--leaf)}
footer .wrap{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:28px;padding-block:34px 40px;font-size:14px}
footer .brand{margin-bottom:12px}
footer h2{margin:0 0 8px;font-family:var(--dim);font-weight:500;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--quiet)}
footer p{margin:0 0 6px;max-width:40ch}
footer .endorse{font-family:var(--dim);font-size:12.5px;color:var(--quiet);margin-top:12px}
@media (max-width:760px){footer .wrap{grid-template-columns:1fr}}