*{box-sizing:border-box}
body{margin:0;font-family:Roboto,"Helvetica Neue",Arial,sans-serif;color:#2c3e50;background:#fafafa;line-height:1.55}
a{color:#00868e;text-decoration:none}a:hover{text-decoration:underline}
.wrap{max-width:1100px;margin:0 auto;padding:0 24px}
h1,h2,.logo,.card b{font-family:'Barlow Condensed','Arial',sans-serif}
/* header (teal band + pink stamp logo, matching the app) */
header.site{background:#00969c;border-bottom:3px solid #2c3e50;box-shadow:0 4px 0 rgba(0,0,0,.15);padding:8px 0}
header.site .wrap{display:flex;align-items:center}
.logo{color:#fff;background:#E981B9;font-weight:800;font-size:30px;line-height:1;letter-spacing:4px;
padding:12px 14px 8px;border:3px solid #2c3e50;box-shadow:4px 4px 0 rgba(0,0,0,.3);text-shadow:2px 2px 0 #b55189;
transform:rotate(-2deg);border-radius:2px;display:inline-block;margin:6px 0}
header.site nav{margin-left:auto;display:flex;gap:22px}
header.site nav a{color:#fff;font-weight:600;letter-spacing:.5px}
/* text */
h1{font-size:38px;font-weight:700;letter-spacing:.5px;margin:.35em 0 .3em}
h2{font-size:24px;font-weight:600;margin:1.5em 0 .5em;border-bottom:2px solid #e0e0e0;padding-bottom:.3em}
nav.crumbs{font-size:14px;color:#7a8a8c;padding:16px 0 0}nav.crumbs a{color:#7a8a8c}
.meta{color:#5a6b73;margin:0 0 1em}
.tag{display:inline-block;background:#b2ebf2;color:#004d50;font-size:12px;font-weight:700;letter-spacing:.5px;
padding:3px 10px;border-radius:2px;margin:0 5px 5px 0}
/* catalog detail */
.detail{display:flex;gap:34px;flex-wrap:wrap;margin:14px 0 24px}
.detail .cover{flex:0 0 340px;max-width:100%}
.detail .cover img{width:100%;height:auto;border:4px solid #2c3e50;box-shadow:6px 6px 0 rgba(0,0,0,.2);background:#fff}
.detail .info{flex:1;min-width:260px}
.btn{display:inline-block;background:#E981B9;color:#2c3e50;font-weight:700;letter-spacing:1px;padding:13px 22px;
border:3px solid #2c3e50;box-shadow:4px 4px 0 rgba(0,0,0,.25);border-radius:2px}
.btn:hover{background:#efeb42;text-decoration:none}
/* brand grid */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:22px;margin:18px 0}
.card{display:block;color:inherit}
.card img{width:100%;height:auto;border:3px solid #2c3e50;box-shadow:4px 4px 0 rgba(0,0,0,.2);background:#fff;aspect-ratio:3/4;object-fit:cover}
.card .ph{width:100%;aspect-ratio:3/4;border:3px solid #2c3e50;background:#fff url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" fill="%23cdd6d8"><text x="8" y="38" font-size="30">PDF</text></svg>') center/40px no-repeat}
.card b{display:block;margin-top:8px;font-size:18px}
.card span{color:#5a6b73;font-size:12px;font-weight:700;letter-spacing:.5px;text-transform:uppercase}
/* index columns */
.cols{columns:4 200px;margin:14px 0}.cols a{display:block;padding:4px 0;font-weight:500}
.cols .n{display:inline-block;background:#00b6be;color:#004d50;font-size:10px;font-weight:700;padding:1px 7px;border-radius:2px;margin-left:4px}
/* footer (light, matching the app footer) */
footer.site{text-align:center;padding:1.6rem;font-size:.85rem;color:#666;border-top:1px solid #e0e0e0;margin-top:3rem}
footer.site a{color:#00868e}