/* Generated by scripts/gen_pattern_pages.py. The :root tokens are read from
   docs/index.html on every run, so change them there. */
:root{
  --ink:#1B1A17;
  --oxblood:#8F6414;
  --oxblood-soft:#A9821E;
  --paper:#FBFAF7;
  --card:#FFFFFF;
  --muted:#5B574F;
  --rule:#E6E1D8;
  --shadow:0 1px 2px rgba(27,26,23,.05),0 8px 24px rgba(27,26,23,.06);
  --maxw:1080px;
}
*{box-sizing:border-box;}
body{margin:0; background:var(--paper); color:var(--ink); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased;}
a{color:var(--oxblood); text-decoration:none;}
a:hover{text-decoration:underline;}
h1,h2{font-family:Georgia,"Times New Roman",serif;}
.wrap{max-width:780px; margin:0 auto; padding:0 22px;}
.eyebrow{font-size:12.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--oxblood); margin:0 0 14px;}

/* nav */
nav.top{position:sticky; top:0; z-index:30; background:var(--paper); background:color-mix(in srgb,var(--paper) 90%,transparent); backdrop-filter:saturate(140%) blur(8px); border-bottom:1px solid var(--rule);}
nav.top .wrap{display:flex; align-items:center; gap:18px; height:56px;}
nav.top .brand{font-family:Georgia,serif; font-weight:700; font-size:16px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0;}
nav.top .links{display:flex; gap:16px; margin-left:auto; align-items:center; flex:0 0 auto;}
nav.top .links a{color:var(--ink); font-size:14px; font-weight:500; white-space:nowrap;}
nav.top .links a[aria-current]{color:var(--oxblood);}
@media (max-width:720px){ nav.top .links a.hideable{display:none;} }

/* text */
main.wrap{padding-top:56px; padding-bottom:28px;}
h1{font-size:38px; line-height:1.1; letter-spacing:-.6px; margin:0 0 26px;}
h2{font-size:26px; line-height:1.2; letter-spacing:-.3px; margin:52px 0 14px;}
main p{margin:0 0 18px; overflow-wrap:break-word;}
main p a{text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px;}
strong.k{color:var(--oxblood);}
code{font-family:"SFMono-Regular",Consolas,"Liberation Mono",monospace; font-size:.86em; background:var(--card); border:1px solid var(--rule); border-radius:5px; padding:1px 5px; overflow-wrap:anywhere;}
@media (max-width:560px){ h1{font-size:31px;} h2{font-size:23px;} }

/* cards: the index list and the pager */
.doc{background:var(--card); border:1px solid var(--rule); border-radius:11px; padding:16px 18px; display:block;}
.doc:hover{border-color:var(--oxblood-soft); text-decoration:none; box-shadow:var(--shadow);}
.doc .dt{display:block; font-family:Georgia,serif; font-weight:700; font-size:16.5px; line-height:1.3; color:var(--ink);}
.doc .dd{display:block; font-size:14.5px; color:var(--muted); margin-top:4px;}
.doc .dir{display:block; font-size:11.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--oxblood); margin-bottom:4px;}
.plist{list-style:none; margin:34px 0 0; padding:0; display:grid; grid-template-columns:minmax(0,1fr); gap:12px;}
.plist .doc{display:flex; gap:14px; align-items:baseline;}
.plist .num{font-family:Georgia,serif; font-weight:700; color:var(--oxblood); font-size:15px; flex:0 0 auto;}
.pager{display:grid; grid-template-columns:minmax(0,1fr); gap:12px; margin:44px 0 0; padding-top:28px; border-top:1px solid var(--rule);}
@media (min-width:680px){ .pager{grid-template-columns:minmax(0,1fr) minmax(0,1fr);} .pager .next{grid-column:2; text-align:right;} }
.source{font-size:14.5px; color:var(--muted); margin:22px 0 0;}

footer{padding:22px 0 56px; color:var(--muted); font-size:13.5px;}
footer .wrap{display:flex; gap:14px; flex-wrap:wrap; align-items:center;}
footer a{color:var(--muted);}