/* ── Brand page: the guide (brand.js guideHTML) and the Assets tab ── */
.bg{max-width:1040px}
.bg h2{font-size:2rem;margin:56px 0 8px;padding-top:24px;border-top:1px solid var(--border);color:var(--navy)}
.bg h2:first-of-type{border-top:0;margin-top:16px;padding-top:0}
.bg h3{font-size:1.25rem;margin:28px 0 8px;color:var(--plum)}
.bg p,.bg li{line-height:1.7}
.bg .lead{font-size:1.1rem;color:var(--ink-soft);max-width:720px}
.bg .toc{display:flex;flex-wrap:wrap;gap:8px 10px;margin:18px 0 0;padding:0;list-style:none}
.bg .toc a{display:inline-block;background:var(--mist);color:var(--plum-dark);border-radius:999px;padding:7px 16px;font-size:.9rem;font-weight:600;text-decoration:none}
.bg .toc a:hover{background:var(--haze)}
.bg .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin:18px 0}
.bg .tile{border:1px solid var(--border);border-radius:10px;overflow:hidden;background:#fff}
.bg .tile .art{display:flex;align-items:center;justify-content:center;padding:26px;min-height:190px;background:var(--ivory)}
.bg .tile .art.plum{background:var(--plum)} .bg .tile .art.navy{background:var(--navy)} .bg .tile .art.white{background:#fff}
.bg .tile .art img{max-width:100%;max-height:150px;display:block}
.bg .tile .cap{padding:12px 14px;font-size:.88rem;color:var(--ink-soft);border-top:1px solid var(--border);line-height:1.5}
.bg .cap b{color:var(--ink);display:block;margin-bottom:2px}
.bg .cap a{color:var(--plum);font-weight:600;text-decoration:none}
.bg .swatches{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin:16px 0}
.bg .sw{border:1px solid var(--border);border-radius:10px;overflow:hidden;background:#fff}
.bg .sw .chip{height:84px;display:flex;align-items:flex-end;padding:8px 12px;font-size:.82rem;font-weight:600;letter-spacing:.02em}
.bg .sw .meta{padding:10px 12px 12px;font-size:.85rem;color:var(--ink-soft);line-height:1.5}
.bg .sw .meta b{display:block;color:var(--ink);font-size:.98rem;margin-bottom:2px}
.bg .type-sample{border:1px solid var(--border);border-radius:10px;padding:26px 28px;background:#fff;margin:14px 0}
.bg .type-sample .h1{font-family:var(--serif);font-size:2.6rem;line-height:1.15;color:var(--ink);margin:0 0 6px}
.bg .type-sample .h2{font-family:var(--serif);font-size:1.9rem;line-height:1.2;color:var(--ink);margin:0 0 6px}
.bg .type-sample .eyebrow{font-size:.78rem;letter-spacing:2.5px;text-transform:uppercase;color:var(--plum);font-weight:600;margin:0 0 10px}
.bg .type-sample .body{font-size:1.05rem;margin:0 0 6px}
.bg .type-sample .small{font-size:.85rem;color:var(--ink-soft);margin:0}
.bg .rule{font-size:.85rem;color:var(--ink-soft);margin-top:8px;line-height:1.6}
.bg .dos{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:16px 0}
.bg .dos>div{border-radius:10px;padding:18px 22px}
.bg .do{background:var(--mist)} .bg .dont{background:#FBF1F0}
.bg .dos h4{margin:0 0 8px;font-family:var(--sans);font-size:.8rem;letter-spacing:2px;text-transform:uppercase}
.bg .do h4{color:var(--plum-dark)} .bg .dont h4{color:#8A3A33}
.bg .dos ul{margin:0;padding-left:18px} .bg .dos li{font-size:.95rem;margin-bottom:4px}
.bg .card{border:1px solid var(--border);border-radius:10px;padding:20px 24px;background:#fff;margin:14px 0}
.bg .card p{margin:0 0 8px}
.bg table{width:100%;border-collapse:collapse;margin:14px 0;font-size:.95rem;background:#fff}
.bg th,.bg td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--border);vertical-align:top}
.bg th{font-size:.78rem;letter-spacing:1.5px;text-transform:uppercase;color:var(--ink-soft)}
.bg .dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:10px 22px;margin:14px 0;padding:0;list-style:none}
.bg .dl li{padding:10px 0;border-bottom:1px solid var(--border);font-size:.95rem}
.bg .dl a{color:var(--plum);font-weight:600;text-decoration:none}
.bg .dl span{display:block;color:var(--ink-soft);font-size:.85rem}
.bg .big-dl{display:inline-block;background:var(--plum);color:#fff;padding:14px 26px;border-radius:8px;font-weight:600;text-decoration:none;margin:8px 8px 4px 0}
.bg .big-dl:hover{background:var(--plum-dark);color:#fff}
.bg .space-demo{position:relative;display:inline-block;padding:12%;background:repeating-linear-gradient(45deg,#F3EEF3,#F3EEF3 6px,#FAF7FA 6px,#FAF7FA 12px);border:1px dashed #C9B6C9;border-radius:8px;max-width:420px}
.bg .space-demo img{display:block;width:100%}
.bg .space-demo::after{content:"clear space = the height of the capital C";position:absolute;left:12px;bottom:8px;font-size:.75rem;color:var(--ink-soft)}
.bg .site-demo{border:1px solid var(--border);border-radius:10px;overflow:hidden;background:#fff;margin:14px 0}
.bg .site-demo .hdr{display:flex;align-items:center;gap:14px;padding:14px 20px;border-bottom:1px solid var(--border);background:#fff}
.bg .site-demo .hdr img.mark{width:46px;height:46px} .bg .site-demo .hdr img.word{height:30px;width:auto}
.bg .site-demo .hdr .cta{margin-left:auto;background:var(--plum);color:#fff;padding:10px 20px;border-radius:8px;font-weight:600;font-size:.92rem}
.bg .site-demo .band{display:flex;align-items:center;justify-content:center;gap:12px;padding:10px 16px;background:linear-gradient(90deg,#C7A65A 0%,var(--plum) 100%);color:#fff;font-family:var(--serif);font-size:1.02rem;letter-spacing:.03em}
.bg .site-demo .band img{width:26px;height:26px}
.bg .site-demo .page{padding:28px 24px;background:var(--ivory)}
.bg .site-demo .page .btn-site{display:inline-block;background:var(--plum);color:#fff;padding:14px 28px;border-radius:5px;font-weight:600;font-size:.95rem;margin-top:12px}
.bg .site-demo .foot{background:var(--navy);color:rgba(255,255,255,.85);padding:22px 24px;font-size:.9rem;display:flex;flex-wrap:wrap;gap:18px 32px;align-items:center}
.bg .site-demo .foot .lab{font-size:.72rem;letter-spacing:1.5px;text-transform:uppercase;color:var(--orchid);font-weight:700}
.bg .site-demo .foot .vals{color:var(--gold);font-family:var(--serif);font-size:1.02rem}
.bg .site-demo .foot .vals i{display:inline-block;width:8px;height:8px;border-radius:50% 0;background:var(--gold);margin:0 10px;vertical-align:middle;transform:rotate(45deg)}
.bg .site-demo .foot a{color:rgba(255,255,255,.65);text-decoration:none}
.bg .handles li{margin-bottom:6px}
.bg .handles .tbc{color:var(--ink-soft);font-style:italic}
@media(max-width:640px){.bg .dos{grid-template-columns:1fr}.bg h2{font-size:1.6rem}.bg .type-sample .h1{font-size:2rem}.bg .site-demo .hdr .cta{display:none}}

/* assets tab */
.as-top{display:flex;gap:.6rem;flex-wrap:wrap;margin:0 0 1.2rem;align-items:center}
.as-top .btn{padding:.8rem 1.3rem}
.as-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:.8rem;margin:.6rem 0 1.6rem}
.as-tile{background:#fff;border:1px solid var(--border);border-radius:10px;overflow:hidden;display:flex;flex-direction:column;min-width:0}
.as-art{height:150px;display:flex;align-items:center;justify-content:center;padding:16px;background:var(--ivory)}
.as-art.plum{background:var(--plum)} .as-art.navy{background:var(--navy)} .as-art.white{background:#fff;border-bottom:1px solid var(--border)}
.as-art img{max-width:100%;max-height:118px;display:block}
.as-art .as-doc{font-family:var(--serif);font-size:1.6rem;color:var(--plum)}
.as-body{padding:.6rem .75rem .7rem;display:flex;flex-direction:column;gap:.2rem;flex:1}
.as-body b{font-size:.9rem;overflow-wrap:anywhere}
.as-body .use{font-size:.8rem;color:var(--ink-soft);line-height:1.4;flex:1}
.as-meta{display:flex;align-items:center;gap:.6rem;font-size:.78rem;color:var(--ink-soft);margin-top:.3rem}
.as-meta a{text-decoration:none;color:var(--plum);font-weight:600}
.as-meta .link{font-size:.78rem;text-decoration:none}
.as-meta .link:hover{text-decoration:underline}
.as-set{margin:.4rem 0 1.4rem}
.as-set h3{font-size:1.3rem;margin-bottom:.1rem;color:var(--navy)}
.as-set .note{font-size:.88rem;color:var(--ink-soft);margin:0 0 .5rem;max-width:70ch}
.phgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.6rem;margin:.55rem 0 .6rem}
.phcard{display:flex;flex-direction:column;gap:.2rem;min-width:0}
.phthumb{position:relative;display:block;aspect-ratio:1;border-radius:10px;overflow:hidden;background:var(--haze)}
.phthumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .25s}
.phthumb.contain img{object-fit:contain;padding:10%;background:#fff}
.phthumb:hover img{transform:scale(1.03)}
.phmeta{display:flex;justify-content:space-between;align-items:baseline;gap:.4rem;font-size:.78rem;padding:0 .15rem}
.phmeta span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.phmeta .bdl{text-decoration:none;color:var(--plum);font-weight:700}
.as-section{margin-top:2rem;padding-top:1.4rem;border-top:1px solid var(--border)}
@media(max-width:760px){.phgrid{grid-template-columns:repeat(3,1fr);gap:.4rem}.as-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* team uploads (uploads.js renderUploads, hosted on Brand › Assets) */
.phplay{position:absolute;right:.45rem;bottom:.45rem;background:rgba(30,42,68,.88);color:#fff;border-radius:999px;padding:.12rem .55rem;font-size:.75rem;font-weight:700}
.upcard .phthumb{display:flex;align-items:center;justify-content:center;text-decoration:none}
.upicon{display:flex;align-items:center;justify-content:center;width:100%;height:100%;font:700 1.4rem var(--sans);color:var(--plum);letter-spacing:.05em}
.upwho{font-size:.78rem;padding:0 .15rem;line-height:1.3}
.upnote{font-size:.78rem;padding:0 .15rem;color:var(--ink-soft);line-height:1.3;overflow-wrap:anywhere}
.updel{font-size:.72rem;color:var(--red)}
.up-actions{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;margin:.6rem 0}
.uprow{display:grid;grid-template-columns:minmax(0,1fr) 140px 6.5rem;gap:.6rem;align-items:center;margin:.35rem 0;font-size:.85rem}
.uprow .upname{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.uprow .upst{white-space:nowrap}
.uprow.bad .upst{color:var(--red);white-space:normal}
.uprow.bad{grid-template-columns:minmax(0,1fr) 140px minmax(6.5rem,auto)}
.uprow .pbar{margin:0}
.uplist{margin:.3rem 0 .6rem;padding-left:1.1rem;max-height:30vh;overflow:auto;font-size:.9rem}
@media(max-width:760px){.uprow{grid-template-columns:minmax(0,1fr) 80px 5rem}.upwho,.upnote{font-size:.7rem}}
