:root { --ink:#172433; --muted:#5c6875; --paper:#fbfaf7; --card:#fff; --line:#d9dee3; --accent:#745844; --notice:#fff8e7; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--paper); font:1rem/1.65 Charter, Georgia, serif; }
.skip-nav { position:fixed; left:1rem; top:-5rem; z-index:2000; padding:.7rem 1rem; color:#fff; background:#172433; }
.skip-nav:focus { top:.5rem; }
main { max-width:74rem; margin:0 auto; padding:clamp(2rem,5vw,5rem) clamp(1rem,4vw,3rem); }
a { color:#405f7d; text-underline-offset:.18em; }
a:focus-visible, input:focus-visible { outline:3px solid #9c6f50; outline-offset:3px; }
.pattern-hero { max-width:55rem; margin-bottom:2rem; }
.eyebrow { margin:0 0 .5rem; color:var(--accent); font:700 .85rem/1.2 system-ui,sans-serif; letter-spacing:.08em; text-transform:uppercase; }
h1,h2,h3 { line-height:1.2; }
h1 { margin:.2rem 0; font-size:clamp(2.2rem,6vw,4.4rem); }
h2 { margin-top:2.5rem; }
.subtitle { margin:.2rem 0 1.5rem; color:var(--accent); font-size:1.4rem; font-style:italic; }
.lede { font-size:1.2rem; }
.breadcrumbs { display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:2rem; font-family:system-ui,sans-serif; font-size:.9rem; }
.review-notice { padding:1.25rem 1.5rem; border:1px solid #d5b974; border-radius:.75rem; background:var(--notice); }
.review-notice h2 { margin-top:0; }
.review-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; }
.review-grid div { padding:.8rem; border-radius:.5rem; background:rgba(255,255,255,.65); }
dt { font:700 .85rem/1.3 system-ui,sans-serif; }
dd { margin:.25rem 0 0; }
.pattern-grid { display:grid; grid-template-columns:1fr 1fr; gap:2rem; }
.compact-dl { display:grid; grid-template-columns:max-content 1fr; gap:.5rem 1rem; }
.metadata,.muted { color:var(--muted); font-size:.9rem; }
.evidence-list { display:grid; gap:1rem; }
.evidence-list article { padding:1rem 1.2rem; border:1px solid var(--line); border-radius:.7rem; background:var(--card); }
.evidence-list h3 { margin-top:0; }
.related-list { columns:2; }
.pattern-pagination { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:3rem; padding-top:1.5rem; border-top:1px solid var(--line); }
.pattern-pagination a:last-child { text-align:right; }
.pattern-search { position:sticky; top:70px; z-index:10; margin:1.5rem 0; padding:1rem; border:1px solid var(--line); border-radius:.7rem; background:rgba(251,250,247,.96); }
.pattern-search label { display:block; font:700 .95rem/1.4 system-ui,sans-serif; }
.pattern-search input { width:100%; min-height:48px; margin:.45rem 0; padding:.6rem .75rem; border:1px solid #8793a0; border-radius:.4rem; font:1rem system-ui,sans-serif; }
.pattern-search p { margin:0; color:var(--muted); }
.pattern-card-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; padding:0; list-style:none; }
.pattern-card a { display:grid; gap:.25rem; height:100%; padding:1rem; border:1px solid var(--line); border-radius:.7rem; color:inherit; background:var(--card); text-decoration:none; }
.pattern-card a:hover { border-color:#7b8997; box-shadow:0 4px 16px rgba(23,36,51,.08); }
.pattern-card span,.pattern-card small { color:var(--muted); }
.pattern-id { font:700 .8rem/1.2 system-ui,sans-serif; color:var(--accent)!important; }
.no-results { padding:2rem; text-align:center; }
.pattern-footer { padding:2rem 1rem; color:#d9e0e7; background:#172433; text-align:center; }
.pattern-footer nav { display:flex; justify-content:center; flex-wrap:wrap; gap:1rem; }
.pattern-footer a { color:#fff; }
@media (max-width:800px) { .review-grid,.pattern-grid,.pattern-card-grid { grid-template-columns:1fr; } .related-list { columns:1; } }
@media (prefers-color-scheme:dark) { :root { --ink:#edf1f5; --muted:#aeb9c4; --paper:#101823; --card:#182330; --line:#3b4b5d; --accent:#d0a789; --notice:#302819; } .review-grid div { background:rgba(16,24,35,.55); } .pattern-search { background:rgba(16,24,35,.96); } .pattern-search input { color:var(--ink); background:var(--card); } }
@media (prefers-reduced-motion:reduce) { * { scroll-behavior:auto!important; transition:none!important; } }