/* brand.html — the internal brand kit. Sits on top of site.css. */
.kit-chip{display:inline-flex;align-items:center;padding:.3rem .55rem;background:var(--on-ink);color:var(--inkbg);font-family:var(--font-display);font-weight:900;font-size:.95rem;letter-spacing:.12em;line-height:1;text-transform:uppercase}
.back{margin-left:auto;color:var(--on-ink-mute);font-stretch:80%;font-weight:600;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;white-space:nowrap}
.back:hover{color:var(--on-ink)}
@media(max-width:40em){.back{display:none}.kit-chip{margin-left:auto}}

.kit{max-width:78rem;margin-inline:auto;padding:clamp(2rem,5vw,4rem) var(--gutter) 5rem}
.kit section{padding:0;margin:0 0 clamp(3.5rem,7vw,5.5rem)}
.kit-intro{padding-bottom:clamp(2rem,4vw,3rem);border-bottom:3px solid var(--line)}
.kit h1{font-size:clamp(2.6rem,6vw,5.4rem);max-width:15ch;text-wrap:balance;margin:.25rem 0 1rem}
.kit h2.display{font-size:clamp(1.9rem,4vw,3.2rem);max-width:20ch;margin:0 0 .6rem}
.kit .h-slots{margin-top:3rem}
.kit .lead{max-width:64ch;margin:0 0 1.5rem;color:var(--fg-2);font-size:clamp(1rem,.95rem + .3vw,1.15rem);line-height:1.45}
.kit .lead a{color:var(--red-text)}
.kit .act-row{margin-bottom:.5rem}

.slots-wrap{overflow-x:auto;border:2px solid var(--line)}
.slots{width:100%;border-collapse:collapse;font-size:.92rem}
.slots th{padding:.6rem 1rem;border-bottom:2px solid var(--line);background:var(--bg-2);color:var(--fg-mute);font-stretch:80%;font-weight:700;font-size:.72rem;letter-spacing:.1em;text-align:left;text-transform:uppercase}
.slots td{padding:.65rem 1rem;border-bottom:1px solid var(--rule);vertical-align:top}
.slots tr:last-child td{border-bottom:0}
.slots td:first-child{font-family:var(--font-display);font-weight:800;font-size:1.1rem;letter-spacing:.02em;text-transform:uppercase}
.slots td:nth-child(2) a{font-family:var(--font-mono);font-size:.85rem;color:var(--red-text)}
.slots td:last-child{font-family:var(--font-mono);font-size:.85rem;white-space:nowrap;color:var(--fg-mute)}

.assets{display:grid;grid-template-columns:repeat(auto-fill,minmax(16rem,1fr));gap:1.25rem}
.assets-wide{grid-template-columns:repeat(auto-fill,minmax(24rem,1fr))}
.asset{display:flex;flex-direction:column;margin:0;border:2px solid var(--line);background:var(--bg)}
.asset-preview{display:grid;place-items:center;aspect-ratio:var(--ar,1);max-height:22rem;padding:1rem;border-bottom:2px solid var(--line);transition:filter .2s}
.asset-preview:hover{filter:brightness(1.08)}
.asset-preview img{display:block;width:100%;height:100%;object-fit:contain}
.asset-preview.on-dark{background:oklch(14% .014 25)}
.asset-preview.on-paper{background:oklch(97% .012 80)}
.asset-preview.on-red{background:oklch(51% .215 28)}
.asset-preview.checker{background:conic-gradient(oklch(55% .01 60 / .28) 25%,transparent 0 50%,oklch(55% .01 60 / .28) 0 75%,transparent 0) 0 0/22px 22px,var(--bg-2)}
.asset figcaption{display:grid;gap:.2rem;padding:.8rem 1rem .6rem}
.asset figcaption b{font-family:var(--font-mono);font-weight:700;font-size:.82rem;word-break:break-all}
.asset figcaption span{color:var(--fg-mute);font-stretch:85%;font-size:.74rem;letter-spacing:.05em;text-transform:uppercase}
.asset figcaption em{font-style:normal;color:var(--fg-2);font-size:.88rem}
.asset .btn{align-self:flex-start;margin:.25rem 1rem 1rem}

.swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(13rem,1fr));gap:1rem}
.swatch{border:2px solid var(--line);background:var(--bg)}
.swatch i{display:block;height:6.5rem;background:var(--c)}
.swatch div{display:grid;gap:.25rem;padding:.75rem 1rem .9rem}
.swatch b{font-family:var(--font-display);font-weight:800;font-size:1.25rem;text-transform:uppercase}
.swatch code{font-family:var(--font-mono);font-size:.78rem;color:var(--red-text)}
.swatch span{color:var(--fg-mute);font-size:.82rem;line-height:1.35}

.type-grid{display:grid;gap:1.25rem;margin-bottom:1.25rem}
@media(min-width:56em){.type-grid{grid-template-columns:1fr 1fr}}
.type-card{display:grid;gap:.35rem;padding:1.5rem 1.5rem 1.25rem;border:2px solid var(--line)}
.type-sample{margin:0 0 1rem}
.type-sample.display{font-size:clamp(2.8rem,6vw,4.6rem)}
.type-sample.display br+*{color:var(--red)}
.type-sample.body{font-size:clamp(1.1rem,1rem + .5vw,1.35rem);line-height:1.35;color:var(--fg-2);font-weight:500}
.type-card b{font-family:var(--font-display);font-weight:800;font-size:1.3rem;text-transform:uppercase}
.type-card span{color:var(--fg-mute);font-size:.9rem;line-height:1.4}

.copybank{display:grid;gap:.9rem}
.copy-item{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:1rem;padding:1rem 1.25rem;border:2px solid var(--line)}
.copy-item b{display:block;margin-bottom:.35rem;font-stretch:80%;font-weight:700;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-mute)}
.copy-item p{margin:0;white-space:pre-wrap;line-height:1.45;color:var(--fg)}
@media(max-width:40em){.copy-item{grid-template-columns:1fr}}

.rules{display:grid;gap:1.5rem}
@media(min-width:56em){.rules{grid-template-columns:1fr 1fr;gap:2.5rem}}
.rules h3{font-size:2rem;margin:0 0 .5rem}
.rules div:last-child h3{color:var(--red)}
.rules ul{margin:0;padding:0;list-style:none;display:grid;gap:.5rem}
.rules li{padding:.6rem 0;border-top:1px solid var(--rule);color:var(--fg-2);line-height:1.4}

.kit-foot{padding-block:2rem}
.kit-foot .legal{margin:0;padding:0;border:0}
.kit-foot code{font-family:var(--font-mono);color:var(--on-ink)}