/* Color chapter: tier overview, tier panels, usage grids, type pairing, misuses */
#color .sys-tiers{display:grid;gap:clamp(48px,5vw,80px)}
#color .sys-tier{display:grid;gap:var(--gut-l)}
#color .sys-row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);row-gap:var(--gut-xl)}
#color .sys-item{grid-column:span 3;margin:0;display:grid;gap:12px;align-content:start;min-width:0}
#color .sys-dot{position:relative;width:100%;aspect-ratio:3/2;border-radius:var(--radius-l,12px);overflow:hidden}
#color .sys-item figcaption{display:grid;gap:2px}
#color .sys-name{font-size:var(--text-body-s,0.875rem);font-weight:500;color:var(--ink,var(--color-neutral-darkest))}
#color .sys-hex{font-family:var(--mono);font-size:var(--t-label-sm,11px);letter-spacing:0.06em;color:var(--neutral-dark)}
#color .tier-panel{display:grid;grid-template-columns:var(--grid-label);column-gap:var(--gut-2xl,64px);row-gap:var(--gut-xl,40px);align-items:start}
#color .tier-copy{margin:0;max-width:44ch;color:var(--neutral-dark);font-size:var(--text-body-m,1rem);line-height:1.55;text-wrap:pretty}
#color .tier-mosaic{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:var(--gut);min-height:clamp(360px,36vw,520px)}
#color .tier-mosaic.primary>:first-child{grid-column:span 5}#color .tier-mosaic.primary>:last-child{grid-column:span 4}
#color .tier-mosaic.accent>*{grid-column:span 3}
#color .tier-cell{border-radius:var(--radius-l,12px);border:none;display:flex;flex-direction:column;justify-content:space-between;gap:24px;min-height:100%}
#color .tier-cell .codes{opacity:1;margin-top:auto}
#color .a11y{display:flex;flex-wrap:wrap;gap:8px}
#color .a11y span{font-family:var(--mono);font-size:var(--t-label-sm,11px);letter-spacing:0.06em;text-transform:uppercase;padding:5px 10px;border:1px solid currentColor;border-radius:999px}
#color .usage-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gut-l,32px)}
#color .usage-grid figure{margin:0;display:grid;gap:14px}
#color .usage-media{width:100%;border-radius:12px;overflow:hidden;background:var(--white)}
#color .usage-grid figcaption,#color .wm-grid figcaption{font-size:var(--text-body-s,0.875rem);color:var(--neutral-dark)}
#color .pair-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:clamp(16px,1.6vw,24px)}
#color .pair{aspect-ratio:3/2;border-radius:12px;padding:20px;display:flex;flex-direction:column;justify-content:space-between}
#color .pair-aa{font-size:var(--text-h3-size,46px);line-height:1;font-weight:500;letter-spacing:var(--ls-tight,-0.02em)}
#color .pair-meta{display:flex;justify-content:space-between;gap:12px;font-family:var(--mono);font-size:var(--t-label-sm,11px);letter-spacing:0.06em;text-transform:uppercase}
#color .fine{margin:20px 0 0;font-size:var(--text-body-xs-size,12px);color:var(--neutral-dark)}
#color .wm-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gut-m,24px)}
#color .wm-grid figure{margin:0;display:grid;gap:14px}
#color .wm-grid .logo-stage{border-radius:12px}
#color .donts{margin-top:0}#color .dont{display:flex;flex-direction:column;gap:16px;aspect-ratio:auto;padding:20px;height:auto}#color .dont .preview{flex:none;width:100%;padding:0;overflow:hidden;background:none;border:none}#color .dont .label{align-items:flex-start}
#color .mini-slide{width:100%;aspect-ratio:16/9;border-radius:12px;display:flex;align-items:center;justify-content:center;padding:24px}
#color .mini-slide span{font-size:clamp(18px,2vw,var(--text-h5-size,30px));text-align:center;line-height:1.2;font-weight:500;letter-spacing:var(--ls-tight,-0.02em)}
#color .mini-flood{padding:0;gap:0;overflow:hidden}
#color .mini-flood i{flex:1 1 0;height:100%}
@media (max-width:1024px){#color .sys-item{grid-column:span 4}#color .sys-tier,#color .tier-panel{grid-template-columns:minmax(0,1fr)}#color .pair-grid,#color .wm-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){#color .sys-item{grid-column:span 6}#color .tier-mosaic{grid-template-columns:minmax(0,1fr)}#color .tier-mosaic>*{grid-column:auto!important}#color .usage-grid{grid-template-columns:minmax(0,1fr)}#color .tier-mosaic{min-height:0}#color .tier-cell{min-height:220px}}
@media (max-width:520px){#color .pair-grid,#color .wm-grid{grid-template-columns:minmax(0,1fr)}}
#color .sys-hex{overflow-wrap:anywhere}
#color .color-block .palette-grid{margin-top:clamp(56px,6vw,96px)!important}#color .color-block .combos,#color .color-block .gradient-pair{margin-top:clamp(40px,4vw,64px)}#color .combos{gap:clamp(24px,2.4vw,40px)}



/* Tightened color page: about 30% shorter. Square chips, slide-ratio media, primary and accent swatches keep the most room */
#color .sys-tiers{gap:var(--gut-xl,40px)}
#color .sys-tier{gap:var(--gut-m,16px)}
#color .sys-row{grid-template-columns:repeat(8,minmax(0,1fr));row-gap:var(--gut-l,24px)}
#color .sys-item{grid-column:auto;gap:8px}
#color .sys-dot{aspect-ratio:1/1}
#color .tier-mosaic{min-height:clamp(300px,28vw,420px)}
#color .usage-grid{gap:var(--gut-m,16px) var(--gut-l,24px)}
#color .usage-grid figure,#color .wm-grid figure{gap:8px}
#color .pair{aspect-ratio:16/9;padding:16px}
#color .pair-aa{font-size:var(--text-h4-size,37px)}
#color .dont{padding:16px;gap:12px}
@media (max-width:1024px){#color .sys-row{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:520px){#color .sys-row{grid-template-columns:repeat(3,minmax(0,1fr))}}

#color .pair-grid .pair{aspect-ratio:3/2!important;min-height:0!important}


#color .pair-grid{grid-template-columns:repeat(6,minmax(0,1fr))!important;gap:var(--gut-m,16px)!important}#color .pair-grid .pair{aspect-ratio:4/5!important;padding:clamp(16px,1.6vw,24px)!important}#color .pair-grid .pair-aa{font-size:clamp(40px,4.4vw,72px)!important}@media (max-width:1100px){#color .pair-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}}@media (max-width:560px){#color .pair-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}

/* Color system: 5 brand colors lead, the neutral ramp supports as 1 joined strip */
#color .sys-tiers,#color .sys-status{container-type:inline-size}#color .sys-brand .sys-row{grid-template-columns:repeat(5,minmax(0,1fr))!important;column-gap:var(--gut,24px)}#color .sys-brand .sys-dot{aspect-ratio:4/3!important}#color .sys-brand .sys-name{font-size:var(--text-body-l,1.125rem)}
#color .sys-neutral .sys-row{grid-template-columns:repeat(8,minmax(0,1fr))!important;column-gap:0!important;row-gap:0}#color .sys-neutral .sys-dot{aspect-ratio:auto!important;height:calc((100cqw - 3 * var(--gut,24px)) / 4 * 0.2625);border-radius:0!important}#color .sys-neutral .sys-item:first-child .sys-dot{border-radius:12px 0 0 12px!important}#color .sys-neutral .sys-item:last-child .sys-dot{border-radius:0 12px 12px 0!important}#color .sys-neutral .sys-item figcaption{padding-right:8px}
@media (max-width:1024px){#color .sys-brand .sys-row{grid-template-columns:repeat(3,minmax(0,1fr))!important;row-gap:var(--gut-l,24px)}#color .sys-neutral .sys-row{grid-template-columns:repeat(4,minmax(0,1fr))!important;row-gap:var(--gut-m,16px)}#color .sys-neutral .sys-dot{border-radius:0!important}}

@media (min-width:1025px){#color .sys-ramp .sys-row{grid-template-columns:repeat(7,minmax(0,1fr))!important}}

#color .sys-use{margin-top:8px;max-width:44ch;font-size:var(--text-body-s,0.875rem);line-height:1.5;color:var(--color-neutral-dark);text-wrap:pretty}
@media (max-width:1024px){#color .sys-neutral .sys-dot{height:var(--space-12,48px)}#color .sys-status .sys-row{grid-template-columns:repeat(2,minmax(0,1fr))!important}}